Question

我找到了两个优秀的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是唯一可用的选项。将在代码中挖掘，看看我是否能找到需要改变的必要位。如果在此期间任何人有任何想法!!!

Answer 1

你可以使用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;
    }
});

应该适用于你描述的内容......我已经测试了它用鼠标拖放了吗？使用左/右/主/结束键（显然，如果你想要一个垂直滑块，你需要将左/右改为上/下）。

一些注意事项：

显然，值数组是您想要的任何步骤。
同样很明显，上面的代码假定一个id为“slider”的div可以工作。
如果您的最小值/最大值与滑块的最小值/最大值不同，我可能会奇怪地工作（我建议只使用“min：values [0]，max：values [values.length - 1] ]“作为滑块上的最小/最大选项＆amp;然后你应该总是安全的。”
显然，此选项目前不会降级到下拉列表，但它很容易做到......只需将您的选择呈现为正常的下拉列表（默认状态为无javascript）＆amp;然后使用jquery隐藏下拉列表，并根据选项创建值数组。然后你可以在更新上面代码中的滑块的同时更新（隐藏）下拉列表，这样当你的表单发布时，将在下拉列表中选择正确的值。

希望有所帮助。

Answer 2

在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

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

2 个答案: