How to display numbers above the slider so that you can see what is selected? and so that you can choose 1 number out of 5

<input type=range id=fader step=20 list=volsettings> <datalist id=volsettings> <option>30</option> <option>45</option> <option>60</option> <option>90</option> <option>120</option> </datalist>

  • jqueryui.com/slider/#hotelrooms - Nikita Fast
  • and how to specify only 5 numbers? - Aslero
  • Try it there - if it turns out in js sharite - I'm lazy - Nikita Fast
  • chic answer. - sergey - dev
  • there you can only put a step, but my step is different - Aslero

2 answers 2

There is an example: https://codepen.io/trevanhetzel/pen/rOVrGK

enter image description here

You can also give a label to a datalist, but this is not supported everywhere.

enter image description here

 <input type="range" list="tickmarks" step="10"> <datalist id="tickmarks"> <option value="0" label="0%"> <option value="10"> <option value="20"> <option value="30"> <option value="40"> <option value="50" label="50%"> <option value="60"> <option value="70"> <option value="80"> <option value="90"> <option value="100" label="100%"> </datalist>

  • there you can only put a step, but my step is different - Aslero

 <form name="myform" oninput=" range1value.value = range1.valueAsNumber; range1value.style.marginLeft=Math.round(range1.clientWidth * (range1.value / range1.max))+'px'; "> <output name="range1value" for="range1" >0</output> <br/> <input id="fader" name="range1" type="range" step="20" list="volsettings" max="200" value="0"> <datalist id=volsettings> <option value="0"/> <option value="20"/> <option value="45"/> <option value="60"/> <option value="90"/> <option value="120"/> </datalist> </form>

The max attribute is required, without it the indentation will not be considered.

  • and to show all 5 numbers above the slider? - Aslero