html - Range input (slider) with markings for intermediate points -


i want slider using html5 this: enter image description here can display value. have tried below code:

<input type=range min=0 max=100 value=50 step=1 list=tickmarks>     <datalist id=tickmarks>         <option value="0 20">0</option>         <option>20</option>         <option>40</option>         <option>60</option>         <option>80</option>         <option>100</option>     </datalist>

but nothing seems work. idea?

you can sort of achieve want using below code. doing here is:

  • use linear-gradient (repeating) generate lines @ required intervals
  • add text using pseudo-element , give required space in between them using word-spacing property. chrome (webkit browsers) container not required , commented code in sample alone enough firefox requires container. think behavior in ff correct 1 because input elements aren't expected support pseudo-elements , hence better retain container future-proof

points note:

  • this sample tested on chrome (44.0.2376.0 dev-m, 42.0.2311.90 m), firefox (36.0.4), internet explorer 11 , opera 28.
  • i assume usage of repeating-linear-gradient or linear-gradient should not issue.

browser support :

  • for range input - chrome 5+, firefox 23+, ie 10+, safari 3.1+, opera 9+
  • for repeating gradient - chrome 10+ (-webkit prefix), firefox 3.6+ (-moz prefix), ie 10+, safari 5.1, opera 11.6.

input[type='range'] {    box-sizing: border-box;    border: 0px solid transparent;    padding: 0px;    margin: 0px;    width: 210px;    height: 50px;    cursor: pointer;    background: -webkit-repeating-linear-gradient(90deg, #777, #777 1px, transparent 1px, transparent 40px) no-repeat 50% 50%;    background: -moz-repeating-linear-gradient(90deg, #777, #777 1px, transparent 1px, transparent 40px) no-repeat 50% 50%;    background: repeating-linear-gradient(90deg, #777, #777 1px, transparent 1px, transparent 40px) no-repeat 50% 50%;    background-size: 122px 25px;    font-size: 16px;  }  input[type='range'],  input[type='range']::-webkit-slider-runnable-track,  input[type='range']::-webkit-slider-thumb {    -webkit-appearance: none;  }  input[type='range']::-webkit-slider-runnable-track {    box-sizing: border-box;    width: 200px;    height: 5px;    border-radius: 2px;    background: #777;  }  input[type='range']::-moz-range-track {    box-sizing: border-box;    width: 200px;    height: 5px;    border-radius: 2px;    padding: 0px;    background: #777;  }  input[type='range']::-moz-range-thumb {    box-sizing: border-box;    padding: 0px;    height: 20px;    width: 10px;    border-radius: 2px;    border: 1px solid;    background: #eee;  }  input[type='range']::-ms-track {    box-sizing: border-box;    width: 210px;    height: 5px;    border-radius: 2px;    padding: 0px;    background: #777;    color: #777;  }  input[type='range']::-webkit-slider-thumb {    box-sizing: border-box;    padding: 0px;    height: 20px;    width: 10px;    border-radius: 2px;    border: 1px solid;    margin-top: -8px;    background: #eee;  }  input[type='range']::-ms-thumb {    box-sizing: border-box;    padding: 0px;    height: 20px;    width: 10px;    border-radius: 2px;    border: 1px solid;    background: #eee;  }  input[type="range"]::-ms-fill-lower {    background: transparent;  }  input[type='range']:focus {    outline: none;  }  /*input[type='range']:after{    position: absolute;    content: '20 40 60 80';    padding: 25px 4035px;    word-spacing: 20px;    left: 0px;    top: 0px;  }*/    .container:after {    position: absolute;    color: #777;    content: '20 40 60 80';    padding: 40px;    word-spacing: 20px;    left: 0px;    top: 0px;    z-index: -1;  }  .container {    padding: 0px;    position: relative;  }    /* demo */    output{    display: block;    margin-top: 20px;    color: #777;  }  output:before{    content:"selected value: ";    font-weight: bold;  }  body {    font-family: calibri, arial;  }
<div class="container">    <input type="range" min="0" max="100" value="50" step="1" list="tickmarks" id="rangeinput" oninput="output.value = rangeinput.value">    <datalist id="tickmarks">      <option value="0 20">0</option>      <option>20</option>      <option>40</option>      <option>60</option>      <option>80</option>      <option>100</option>    </datalist>    <output id="output" for="rangeinput">50</output> <!-- display selected value -->  </div>

demo on codepen


Comments

Post a Comment

Popular posts from this blog

jquery - How do you format the date used in the popover widget title of FullCalendar? -

Image
in fullcalendar, how format date used in popover widget title when clicking '+n more'? code: <div class="fc-popover fc-more-popover"> <div class="fc-header fc-widget-header"> <span class="fc-close fc-icon fc-icon-x"></span> <span class="fc-title">tuesday, april 7</span> ... </div> ... </div> you use daypopoverformat that. determines date format of title of popover created eventlimitclick option. must date formatting string. default value "dddd, mmmm d" english , "ll" other languages.
Read more

asp.net mvc - SSO between MVCForum and Umbraco7 -

i need integrate sso between mvcforum (forum of company) , umbraco7 (manages cms company). however struggling shared authentication work. tried several ways suggested on other threads still not running expected. here did: 1. in mvcforum (forum.mywebsite.com) 1.1. machine key in web.xml: <machinekey validationkey="the same key umbraco7" decryptionkey="the same key umbraco7" validation="sha1" decryption="aes" /> 1.2. authenticate forms in web.xml <forms name="my-sso-auth" protection="all" path="/" timeout="43200" domain="forum.mywebsite.com" loginurl="/members/logon" enablecrossappredirects="true" /> 2. in umbraco7 (news.mywebsite.com) 2.1. machine key in web.xml: <machinekey validationkey="the same key mvcforum" decryptionkey="the same key mvcforum" validation="sha1" decryption="aes" /> 2.2. a...
Read more

Python Tkinter keyboard using bind -

i have problem using bind option can click button in keyboard, , call function once key pressed. tried taking other codes have similar purpose , saw i'm doing pretty same, though still have problem must've missed. thankful if me this. here's code: # -*- coding: utf-8 -*- #imports tkinter import * pil import imagetk, image import time import tkmessagebox #===========================================================================================================================================# #tkinter class class app(frame): def __init__(self, master=none): frame.__init__(self, master) self.pack() #===========================================================================================================================================# #game pieces classes class board: def __init__(self, rows = 7, columns = 6, picture_height = none, picture_width = none): self.rows = rows self.columns = columns self.picture ...
Read more