JQuery Slider，如何改变“步长”大小

Question

是否可以使用 JQuery Slider（范围滑块/双滑块）来获得非线性（不一致的“步长”大小）值？

我想让水平 Slider 看起来像：

 |----|----|----|----|----|--------|--------|-------------------------|--------------------------|...
0   500  750  1000  1250 1500     2000     2500                      75000                      100000...

例如，我想要以下 JQuery 代码：

 var values = [0, 500, 750, 1000, 1250, 1500, 2000, 2500, 75000, 100000, 150000, 200000, 250000, 300000, 350000, 400000, 500000, 1000000];
var slider = $("#price-range").slider({
    orientation: 'horizontal',
    range: true,
    min: 0,
    max: 1000000,
    values: [0, 1000000],
    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));
            $("#price-amount").html('$' + ui.values[0] + ' - $' + ui.values[1]);
            return false;
    },
    change: function(event, ui) {
        getHomeListings();
    }
});
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;
}

上面的代码并不完全有效，但网格对齐功能不起作用。

原文由 TomHankers 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不确定您是否希望滑块比例与您的值成比例*但如果是这样，我为提出相同问题的其他人提供了解决方案。 你可以在这里找到我的解决方案。基本上，我利用了 slide 事件，该事件在您移动滑块以模拟步进时触发，但基于定义步进的自定义数组。这样它只允许您“步进”到您的预定义值，即使它们不是均匀分布的。

*换句话说，如果你想让你的滑块看起来像这样：

 |----|----|----|----|----|----|----|
0   10   20  100  1000 2000 10000 20000

然后在这里使用其他解决方案之一，但是如果您希望滑块看起来像这样（图表未按比例）：

 |--|--|-------|-----------|-----------|--------------------|--------------------|
0 10 20     100         1000        2000               10000                20000

那么我链接到的解决方案可能更符合您的需求。

---

编辑： 好的，这个版本的脚本应该适用于双滑块：

 $(function() {
    var values = [0, 500, 750, 1000, 1250, 1500, 2000, 2500, 75000, 100000, 150000, 200000, 250000, 300000, 350000, 400000, 500000, 1000000];
    var slider = $("#price-range").slider({
        orientation: 'horizontal',
        range: true,
        min: 0,
        max: 1000000,
        values: [0, 1000000],
        slide: function(event, ui) {
            var includeLeft = event.keyCode != $.ui.keyCode.RIGHT;
            var includeRight = event.keyCode != $.ui.keyCode.LEFT;
            var value = findNearest(includeLeft, includeRight, ui.value);
            if (ui.value == ui.values[0]) {
                slider.slider('values', 0, value);
            }
            else {
                slider.slider('values', 1, value);
            }
            $("#price-amount").html('$' + slider.slider('values', 0) + ' - $' + slider.slider('values', 1));
            return false;
        },
        change: function(event, ui) {
            getHomeListings();
        }
    });
    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;
    }
});

请注意，它在最左端看起来有点滑稽，因为与右手端相比，跳跃靠得太近了，但是如果您使用键盘箭头移动滑块，您可以看到它按需要步进。解决这个问题的唯一方法是改变你的规模，使其不那么急剧地呈指数级增长。

---

编辑 2： 好的，如果在使用真实值时间距太夸张，则可以为滑块使用一组假值，然后在需要使用真实值时查找对应的真实值（在与此处建议的其他解决方案类似的方式）。这是代码：

 $(function() {
    var trueValues = [0, 500, 750, 1000, 1250, 1500, 2000, 2500, 75000, 100000, 150000, 200000, 250000, 300000, 350000, 400000, 500000, 1000000];
    var values =     [0,   1,   2,    3,    4,    5,    6,    7,    10,     15,     20,     25,     30,     40,     50,     60,     75,     100];
    var slider = $("#price-range").slider({
        orientation: 'horizontal',
        range: true,
        min: 0,
        max: 100,
        values: [0, 100],
        slide: function(event, ui) {
            var includeLeft = event.keyCode != $.ui.keyCode.RIGHT;
            var includeRight = event.keyCode != $.ui.keyCode.LEFT;
            var value = findNearest(includeLeft, includeRight, ui.value);
            if (ui.value == ui.values[0]) {
                slider.slider('values', 0, value);
            }
            else {
                slider.slider('values', 1, value);
            }
            $("#price-amount").html('$' + getRealValue(slider.slider('values', 0)) + ' - $' + getRealValue(slider.slider('values', 1)));
            return false;
        },
        change: function(event, ui) {
            getHomeListings();
        }
    });
    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;
    }
    function getRealValue(sliderValue) {
        for (var i = 0; i < values.length; i++) {
            if (values[i] >= sliderValue) {
                return trueValues[i];
            }
        }
        return 0;
    }
});

您可以摆弄 values 数组（代表滑块停止点）中的数字，直到您将它们按您想要的方式隔开。通过这种方式，从用户的角度来看，您可以感觉到它与值成比例地滑动，但又不会那么夸张。显然，如果您的真实值是动态创建的，您可能需要想出一种算法来生成滑块值，而不是静态定义它们……

原文由 Alconja 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

HTML:

 <body>
   <p>
      Slider Value: <span id="val"></span><br/>
      Nonlinear Value: <span id="nlVal"></span><br/>
   </p>
   <div id="slider"></div>
</body>

记者：

     $(function() {
     var valMap = [0, 25,30,50,55,55,60,100];
     $("#slider").slider({
        // min: 0,
         max: valMap.length - 1,
         slide: function(event, ui) {
           $("#val").text(ui.value);
           $("#nlVal").text(valMap[ui.value]);
         }
     });
    });

原文由 Bharat Parmar 发布，翻译遵循 CC BY-SA 3.0 许可协议