是否有使用不可等分值的 jquery 滑块插件或示例？

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

最好我希望它降级为下拉菜单，所以问题是有人知道支持此功能的插件或对实现此目的的最佳方法有任何建议，定制我自己的灯丝组插件卷等。

更新： 一直在研究灯丝组的滑块，无论如何它都通过 JQuery UI 的滑块实现了手柄。所以看起来修改 JQuery.UI 本身是唯一可用的选择。将深入研究代码，看看是否能找到需要更改的必要部分。如果同时有人有任何想法！

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;
    }
});

应该适用于你所描述的...我已经测试过它可以用鼠标拖动并使用左/右/home/end键（显然，如果您想要垂直滑块，您需要将左/右更改为上/下）。

一些注意事项：

• 显然，值数组是您想要达到目的的任何步骤。
• 同样明显的是，上面的代码假设一个 id 为“slider”的 div 可以工作。
• 如果您的最小/最大值与滑块的最小/最大值不同，它可能会奇怪地工作（我建议只使用“min:值[0]，最大值：value[values.length - 1]”作为滑块上的最小/最大选项，然后您应该始终安全）。
• 显然这个选项目前不会降级为下拉列表，但它会很容易做到......只需将您的选择呈现为普通下拉列表（没有 javascript 的默认状态），然后使用 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