слайдер чисел html

186

26 декабря 2018, 01:10

как вывести над ползунком числа, чтобы было видно что выбирается? и чтобы можно было выбрать 1 число из 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>

Answer 1

Есть такой пример: https://codepen.io/trevanhetzel/pen/rOVrGK

Также в datalist можно давать label, но это не везде поддерживается.

<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>

Answer 2

<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>

Атрибут max обязателен, без него не будет отступ считаться.