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 滑块步骤的主要内容,如果未能解决你的问题,请参考以下文章

jQuery UI:滑块位置更改时的操作

jQuery-UI - “无法读取未定义的属性‘步骤’”

单击滑块轨道时获取 Jquery-UI 滑块值?

JQuery UI完成自动匹配的的下拉列表步骤

jquery ui滑块显示值

Jquery ui 1.8.10 范围滑块不适用于 jquery 3.4.1