JQuery Slider，如何使“步”大小变化
是否有可能使用JQuery滑块（范围滑块/双滑块）具有非线性（非一致的“步长”大小）值？
我想水平滑块看起来像：
|----|----|----|----|----|--------|--------|-------------------------|--------------------------|... 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; }
上面的代码不正确的工作，但捕捉网格function不起作用。
不知道你是否希望滑块缩放比例与你的数值成比例*，但是如果是这样的话，我提供了一个解决scheme来解决这个问题。 你可以在这里find我的解决scheme 基本上我使用slide事件，当你移动滑块来模仿步进，但基于一个自定义数组定义的步骤触发。 这样，它只允许您“步进”到预定义的值，即使它们不均匀分布。
*换句话说，如果你想让你的滑块看起来像这样：
|----|----|----|----|----|----|----| 0 10 20 100 1000 2000 10000 20000
然后去与这里的其他解决scheme之一，但如果你想你的滑块看起来像这样（图表不按比例）：
|--|--|-------|-----------|-----------|--------------------|--------------------| 0 10 20 100 1000 2000 10000 20000
那么我链接到的解决scheme可能更多，你在之后。
编辑：好的，这个版本的脚本应该与双滑块：
$(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：好的，如果当你使用真实值的时候间距太夸张了，你可以使用一组伪造的值作为滑动条，然后查找当你需要使用实际值时对应的实际值（在类似于这里提出的其他解决scheme的方式）。 代码如下：
$(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; } });
你可以摆弄数组（代表滑块停止点）的数字，直到你得到他们分开你想要的。 通过这种方式，您可以从用户的angular度感觉到，它可以按比例滑动，但不会过分夸大。 显然，如果你的真实值是dynamic创build的，你可能需要想出一个algorithm来生成滑块值，而不是静态定义它们。
HTML：
<body> <p> Slider Value: <span id="val"></span><br/> Nonlinear Value: <span id="nlVal"></span><br/> </p> <div id="slider"></div> </body>
JS：
$(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]); } }); });
一种select是使用一个步长，并引用包含所选值的数组。 从0开始，上升到20，得到数组[value_of_slider]来获得你的实际值。 我不知道滑块是否足以告诉你是否有办法给它一个自定义的值。
根据上面的@Seburdis的回答和讨论，并使用你的例子中的名字：
var prices_array = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 150, 200, 250, 500, 1000, 1500, 2000, 2500, 5000, 10000]; function imSliding(event,ui) { //update the amount by fetching the value in the value_array at index ui.value $('#amount').val('$' + prices_arr[ui.value] + ' - $' + prices_arr[prices_arr.length - 1]); } $('#slider-interval').slider({ min:0, max:values_arr.length - 1, slide: imSliding});
我想我可以提供一个更好的解决scheme：这个想法是保持一个数组与我的真正的价值观，除了滑块，然后设置step属性总是为1，让滑块工作与该数组的index ，然后获取真正的来自我的真实数据数组的值。 希望这个例子有助于： http : //jsfiddle.net/3B3tt/3/
有人张贴在jQuery网站上。 看到：
http://forum.jquery.com/topic/non-linear-logarithmic-or-exponential-scale-for-slider
和
这正是你所拥有的，但方式更简单（如1行代码）。
这里是我的一个自定义（非一致的“步长”大小）双滑块（如果想法变得清晰，可以将其修改为单滑块）的简单解决scheme，我的滑块名为“slider-euro”，文本区域是命名金额欧元，你可以在代码中看到。 这个想法是有一个从0到100的滑块和一个有101个位置的数组（“realvalues”）。 滑块值被理解为该数组中的位置。 唯一的是你得到滑块值时必须引用数组。 这是我的例子：
$(function() { var realvalues = [0, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 9000, 10000, 15000, 20000, 25000, 30000, 35000, 40000, 45000, 50000, 55000, 60000, 65000, 70000, 75000, 80000, 85000, 90000, 95000, 100000, 105000, 110000, 115000, 120000, 125000, 130000, 135000, 140000, 145000, 150000, 155000, 160000, 165000, 170000, 175000, 180000, 185000, 190000, 195000, 200000, 205000, 210000, 215000, 220000, 225000, 230000, 235000, 240000, 245000, 250000, 255000, 260000, 265000, 270000, 275000, 280000, 285000, 290000, 295000, 300000, 310000, 320000, 330000, 340000, 350000, 360000, 370000, 380000, 390000, 400000, 450000, 500000, 550000, 600000, 650000, 700000, 750000, 800000, 850000, 900000, 1000000, 1500000, 2000000]; $( "#slider-euro" ).slider({ range: true, min: 0, max: 100, step: 1, values: [ 25, 50 ], slide: function( event, ui ) { $( "#amount-euro" ).val( realvalues[ui.values[ 0 ]] + " € - " + realvalues[ui.values[ 1 ]] + " €"); } }); $( "#amount-euro" ).val( realvalues[$( "#slider-euro" ).slider( "values", 0 )] + " € - " + realvalues[$( "#slider-euro" ).slider( "values", 1 )]+" €" ); });
这是我做了我的。 在这里演示 – http://janpatricklara.com/web/extra/jQueryUISliderUnevenSteps.html
有一个你想要的值的数组
var amts=[50,100,150,200,225,250,300];
将滑块从0增加到数组的长度，步长为1.从数组的索引中输出值，而不是使用滑块的实际值。
这样的增量和步骤是均匀分布的。 之后，你可以抓住标签的值或保存到一个变种。
$('#amtslider').slider({ min:0, max:amts.length-1, step:1, value:0, change:function(event, ui){ //alert(amts[$(this).slider("value")]); //alert($(this).slider("value")); $('#lbl_amt').val(amts[$(this).slider("value")]); }, slide:function(event, ui){ $('#lbl_amt').val(amts[$(this).slider("value")]); } });
如果最小值和最大值相同，则滑块值不会更改
改变这个部分
if (ui.value == ui.values[0]) { slider.slider('values', 0, value); } else { slider.slider('values', 1, value); }
成
if ( ui.values[0] == ui.values[1] ) { slider.slider('values', 0, value); slider.slider('values', 1, value); }else{ if (ui.value == ui.values[0]) { slider.slider('values', 0, value); }else { slider.slider('values', 1, value); } }
我必须做类似的事情，即使这是一个迟到的回应，其他人可能会像我一样发生在这个线程上，并find我的解决scheme有用。 这是我创build的解决scheme：
So apparently, postings containing links to jsfiddle "must be accompanied by code". OK - here ya go, stackoverflow... Some lovely "code" for you.
只需更改值。
$( "#price-range" ).slider({ range: true, min: 1000, max: 300000000, /*step:1,*/ values: [ 1000, 300000000 ], slide: function( event, ui ) { if(ui.values[0]<=100000 && ui.values[1]<=100000){ $("#price-range").slider({step:10000}); }else if(ui.values[0]<=300000 && ui.values[1]<=300000){ $("#price-range").slider({step:25000}); }else if(ui.values[0]<=1000000 && ui.values[1]<=1000000){ $("#price-range").slider({step:50000}); }else if(ui.values[0]<=2000000 && ui.values[1]<=2000000){ $("#price-range").slider({step:100000}); }else if(ui.values[0]<=5000000 && ui.values[1]<=5000000){ $("#price-range").slider({step:250000}); }else if(ui.values[0]<=10000000 && ui.values[1]<=10000000){ $("#price-range").slider({step:500000}); }else if(ui.values[0]<=20000000 && ui.values[1]<=20000000){ $("#price-range").slider({step:1000000}); }else if(ui.values[0]<=50000000 && ui.values[1]<=50000000){ $("#price-range").slider({step:5000000}); }else if(ui.values[0]<=50000000 && ui.values[1]<=50000000){ $("#price-range").slider({step:10000000}); }else if(ui.values[0]<=200000000 && ui.values[1]<=200000000){ $("#price-range").slider({step:25000000}); }else{ $("#price-range").slider({step:100000000}); } $("#mins").val( ui.values[0] ); $("#maxs").val( ui.values[1] ); } });
除上面的@ Broshi的jsfiddle之外，下面是禁用范围的自定义滑块的代码：
jQuery的：
var myData = [1,2,3,4,5,6,7,8,9,10,20,30,40,50,60,70,80,90,100,200,300,400,500,600,700,800,900,1000,2000,3000,4000,5000,10000,20000,30000,50000,100000,200000,500000,1000000,20000000,30000000]; slider_config = { range: false, min: 0, max: myData.length - 1, step: 1, slide: function( event, ui ) { // Set the real value into the inputs console.log(ui); $('#value').val( myData[ ui.value ] ); }, create: function() { $(this).slider('value',0); } }; $("#slider").slider(slider_config);
HTML：
<input id="value" /> <div id="slider"></div>
