我有一个html5范围输入元素，并希望可用的步骤是50，55，60，65，70，80，100，120，150。我有一个想法，可能设置最小值为50，最大值为150，并根据当前值使用jquery更改步长值。我的第一直觉是，这不会是最优雅的解决方案（假设它首先会工作）。有什么想法，什么是最好的方式去做这件事？
fnatzsnv1#
是的，这是可能的。试试这样的方法：
<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>
cmssoen22#
除了@dovelce answer之外，要使它与最接近的值对齐，可以添加以下jquery
let counts = []; jQuery('#rangeList option').each(function() { counts.push(jQuery(this).val()); }); jQuery(document).ready(function(){ jQuery('#rangeSlider').on('change', function(){ let goal = jQuery(this).val(); var closest = counts.reduce(function(prev, curr) { return (Math.abs(curr - goal) < Math.abs(prev - goal) ? curr : prev); }); jQuery(this).val(closest); }); });
2条答案
按热度按时间fnatzsnv1#
是的，这是可能的。试试这样的方法：
cmssoen22#
除了@dovelce answer之外，要使它与最接近的值对齐，可以添加以下jquery