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

i want slider using html5 this: 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