html - 如何将索引标记和值添加到输入类型范围

Question

嗨，我正在尝试向我尝试使用选项的范围滑块添加标签，但它不起作用。

2. 我怎样才能使范围值 100% 它显示整体 4%，因为Max="4"我想在每张幻灯片上增加 25% 并在 4 个步骤中使其达到 100% 任何人都可以向我建议如何在范围幻灯片中添加标签。

var slider = document.querySelector('#slider');

function range_change_event() {
  var percent = slider.value;
  lbl.textContent = percent + '%';
}
slider.addEventListener('input', range_change_event);

<input id="slider" type="range" min="1" max="4" step="0" list="volsettings" />
<label id="lbl" id="value" for="slider">0%</label>
<datalist id="volsettings">
  <option>0</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  </datalist>
</div>

努力实现欲望输出

标签： htmlcssrange

Answer 1

¿ 像这样的东西？

<div style="width: 300px">
  <input style="width: 100%;" id="slider" type="range" min="0" max="100" step="25" />
  <div style="width: 100%; display: inline-block; padding-left: 8px;">
    <div style="display: inline-block;  width:24%; float:left;">|</div>
    <div style="display: inline-block;  width:24%; float:left;">|</div>
    <div style="display: inline-block;  width:24%; float:left;">|</div>
    <div style="display: inline-block;  width:24%; float:left;">|</div>
    <div style="display: inline-block;  float: left;">|</div>
  </div>
  <div style="width: 100%; display: inline-block; padding-left: 5px;">
    <div style="display: inline-block;  width:24%; float:left;">0</div>
    <div style="display: inline-block;  width:24%; float:left;">1</div>
    <div style="display: inline-block;  width:24%; float:left;">2</div>
    <div style="display: inline-block;  width:24%; float:left;">3</div>
    <div style="display: inline-block;  float: left;">4</div>
  </div>
</div>

<label id="lbl" id="value" for="slider" list="volsettings"></label>
<br />
<label id="lbl2" id="value" for="slider" list="volsettings"></label>



<script>
  var slider = document.querySelector('#slider');
  range_change_event();

  function range_change_event() {
    var percent = slider.value;
    lbl2.textContent = (percent / 25);
    lbl.textContent = percent + '%';
  }
  slider.addEventListener('input', range_change_event);
</script>