我有一个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