是否可以在HTML5范围滑块上预定义步骤？

Question

我有一个html5范围输入元素，并希望可用的步骤为50,55,60,65,70,80,100,120,150。

我有一个想法，可能将min设置为50，max为150，并根据当前值使用jquery更改步长值。我的第一直觉是，这不是最优雅的解决方案（假设它首先起作用）。

关于什么是最佳方式的任何想法？

Answer 1

是的，有可能。尝试这样的事情：

<label for="rangeSlider">Slider</label>
<input type="range" min="50" max="150" value="70" id="rangeSlider" step="5" list="rangeList">
<datalist id="rangeList">
    <option>50</option>
    <option>55</option>
    <option>60</option>
    <option>65</option>
    <option>70</option>
    <option>80</option>
    <option>100</option>
    <option>120</option>
    <option>150</option>
</datalist>