是否有一个插件或jquery滑块的示例使用非均匀可分的值?

我发现了两个优秀的jquery插件,用于为Web表单生成一个滑块,在不支持javascript的浏览器中关闭样式会很好地降级。

第一个是Jquery.UI版本: http ://ui.jquery.com/demos/slider/#steps

第二个是滑块的选择元素: http : //www.filamentgroup.com/lab/update_jquery_ui_16_slider_from_a_select_element/

但是我需要创建一个滑块,它不仅可以将滑块分成相等的部分。

例如,假设我有以下数字范围:

800,1000,1100,1200,1300,1400,1500

我希望滑块在800到1000之间有一个很大的差距,然后在1100-1500之间有较小的间隙

所以滑块看起来有点像这样:

800 —- 1000–1100–1200–1300–1400–1500

我希望它能降级为下拉,所以问题是有没有人知道一个支持这个的插件或者有最好的实现方法的建议,定制我自己的filamentgroup插件卷等。

更新:使用灯丝组的滑块进行黑客攻击,无论如何它都通过JQuery UI的滑块实现了手柄。 所以看起来像修改JQuery.UI它的self是唯一可用的选项。 将在代码中挖掘,看看我是否能找到需要改变的必要位。 如果在此期间任何人有任何想法!

你可以通过挂钩滑动事件(有效地覆盖它)使用jquery的滑块来做…这样的事情:

$(function() { var values = [0, 10, 50, 60, 70, 80, 90, 91, 92, 93, 94, 95, 100]; var slider = $("#slider").slider({ slide: function(event, ui) { var includeLeft = event.keyCode != $.ui.keyCode.RIGHT; var includeRight = event.keyCode != $.ui.keyCode.LEFT; slider.slider('option', 'value', findNearest(includeLeft, includeRight, ui.value)); return false; } }); function findNearest(includeLeft, includeRight, value) { var nearest = null; var diff = null; for (var i = 0; i < values.length; i++) { if ((includeLeft && values[i] <= value) || (includeRight && values[i] >= value)) { var newDiff = Math.abs(value - values[i]); if (diff == null || newDiff < diff) { nearest = values[i]; diff = newDiff; } } } return nearest; } }); 

应该适用于你描述的内容...我已经测试了它用鼠标拖动并使用左/右/主页/结束键(显然你需要将左/右更改为向上/向下,如果你想要一个垂直滑块)。

一些说明:

  • 显然,values数组是您想要的任何步骤。
  • 显然,上面的代码假设一个id为“slider”的div才能工作。
  • 如果您的最小值/最大值与滑块的最小值/最大值不同(我建议只使用“min:values [0],max:values [values.length - 1]”),它可能会奇怪地工作您在滑块上的最小/最大选项然后您应该始终是安全的)。
  • 显然这个选项目前不会降级到下拉列表,但它很容易做到......只需将您的选择呈现为正常的下拉列表(默认状态不包含javascript)然后使用jquery隐藏下拉列表,还可以根据选项创建值数组。 然后,您可以在更新上面代码中的滑块的同时更新(隐藏)下拉列表,以便在表单发布时,将在下拉列表中选择正确的值。

希望有所帮助。

在Es6中,您可以通过以下方式找到最近的号码。

 function findClosest(array, value) { return array.sort( (a, b) => Math.abs(value - a) - Math.abs(value - b) )[0]; } let array = [1, 5, 10, 28, 21]; let v = 4; let number = findClosest(array, v); // -> 5