javascript - 少于 4 步的滑块无法正常工作

Question

当有 4 个步骤可以滑动时，我有一个可以完美运行的滑块。

但是，将步骤减少到 2 或 3 会使其笨拙。为什么？

如您在图像中看到的那样，选择最后一步（4K）时，第二个滑块未正确填充。为什么？

代码笔：

https://codepen.io/ogonzales/pen/KKMrXQw

代码：

<div class="__range __range-step __range-step-popup">
    <input value="1" type="range" max="4" min="1" step="1" list="ticks2">
    <datalist id="ticks2">
        <option value="1">Very bad</option>
        <option value="2">Bad</option>
        <option value="3">Good</option>
        <option value="4">Excellent</option>
    </datalist>
    <output class="__range-output-square"></output>
</div>





<div class="__range __range-step __range-step-popup">
    <input value="1" type="range" max="4" min="1" step="1" list="ticks2">
    <datalist id="ticks2">
        <option value="1">1080p</option>
        <option value="2">2K</option>
        <option value="3">4K</option>
    </datalist>
    <output class="__range-output-square"></output>
</div>

标签： javascripthtmlcss

Answer 1

您的输入最大值设置为 4，应设置为 3。工作示例。

...
<input value="1" type="range" max="3" min="1" step="1" list="ticks2">
...