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

http://jsbin.com/ezema

这正是你所拥有的,但方式更简单(如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:

http://jsfiddle.net/YDWdu/

 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>