Entering a range (slider) with marking for intermediate points

Question

I need a slider using HTML5: where i can display the value. I tried the code below:

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

But nothing works. Any idea?

Answer 1

You can achieve what you want using the code below. What we do here:

• Use a linear gradient (repeating) to generate lines at the required intervals
• Add text using a pseudo-element, and then specify the required space between them using the word-spacing . For Chrome (Webkit browsers) a container is not required, and the commented code in the example is quite one, but Firefox requires a container. I believe that the behavior in FF is correct, because input elements, as a rule, should not support pseudo-elements, and therefore it is better to keep the container in the future

Note:

• This sample is being tested in Chrome (44.0.2376.0 dev-m, 42.0.2311.90 m), Firefox (36.0.4), Internet Explorer 11, and Opera 28.
• I assume that using repeating-linear-gradient or linear-gradient should not be a problem.

Browser Support:

• To enter the range - Chrome 5+, Firefox 23+, IE 10+, Safari 3.1+, Opera 9+
• For repeated gradient - prefix Chrome 10+ (-webkit), Firefox 3.6+ (prefix -moz), 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; } /* Just for 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 to 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> <!-- Just to display selected value --> </div> 

Codepen Demo