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

Question

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

我有一个想法，可能将最小值设置为 50，最大值设置为 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>