jQuery UI 滑块步骤
Posted
技术标签:
【中文标题】jQuery UI 滑块步骤【英文标题】:jQuery UI Slider Steps 【发布时间】:2018-05-31 14:20:23 【问题描述】:我有一个 jquery UI 滑块,我注意到如果最大值和最小值之间的差异不是步长选项的精确倍数,则滑块无法正常工作。
例如: 分钟:6900 最大:79900 步长:1500
当我移动最大光标时,最大可达值为 78900 ((78900-6900)/15=48),下一个将是 80400。
我怎样才能达到最大值(79900)?
谢谢
【问题讨论】:
jsfiddle.net/4L0vtLd8/3 如 jQuery UI Slider API 中所述,滑块的完整指定值范围(max - min)应能被步长整除。(参见api.jqueryui.com/slider/#option-step) 【参考方案1】:您可以将最大值设置为步长的倍数:
var range = Math.floor((max - min) / step) + 1;
var max_calc = min + range * step;
然后在幻灯片处理程序中将值限制为原始最大值:
slide: function(event, ui)
var v1 = Math.min(ui.values[0], max);
var v2 = Math.min(ui.values[1], max);
$("#slider-price").slider("values", 0, v1);
$("#slider-price").slider("values", 1, v2);
$("#amount").val("$" + v1 + " - $" + v2);
你的小提琴相应地适应了:https://jsfiddle.net/beaver71/d8wvke7u/
【讨论】:
以上是关于jQuery UI 滑块步骤的主要内容,如果未能解决你的问题,请参考以下文章