JQuery Slider，如何改变“步长”大小
Posted
技术标签:
【中文标题】JQuery Slider，如何改变“步长”大小【英文标题】：JQuery Slider, how to make "step" size change 【发布时间】：2010-11-01 07:53:25 【问题描述】：是否可以使用 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;
上面的代码不完全有效，但对齐网格功能不起作用。
【问题讨论】：
【参考方案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>
【讨论】：
【参考方案2】：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]);
);
);
【讨论】：
除了“valMap”中的数组值，您还可以使用来自 json 的输入【参考方案3】：我想我可以提供一个更好的解决方案：
我们的想法是将一个包含我的真实值的数组与滑块分开，然后将 step 属性始终设置为 1 并让滑块与该数组的 index 一起工作，然后从我的真实数据中获取实际值大批。希望这个例子有帮助：http://jsfiddle.net/3B3tt/3/
【讨论】：
这是此页面 AFAIC 上的最佳解决方案。干得好。 嘿@Eamorr，谢谢;-) 如果您不想要步骤之间的间隙，这绝对是最好的解决方案。【参考方案4】：只需更改值。
$( "#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] );
);
【讨论】：
【参考方案5】：这就是我的做法。 演示在这里 - http://janpatricklara.com/web/extra/jQueryUISliderUnevenSteps.html
有一个你想要的值的数组
var amts=[50,100,150,200,225,250,300];
让滑块从 0 增加到数组的长度，步长为 1。 从数组的索引中输出值，而不是使用滑块的实际值。
这样增量和步长是均匀分布的。之后，您可以获取标签的值或将其保存到 var。
$('#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")]);
);
【讨论】：
【参考方案6】：我不得不做类似的事情，即使这是一个较晚的响应，其他人可能会像我一样在这个线程上发生，并且发现我的解决方案很有用。这是我创建的解决方案：
http://jsfiddle.net/YDWdu/
So apparently, postings containing links to jsfiddle "must be accompanied by code".
OK - here ya go, ***... Some lovely "code" for you.
【讨论】：
【参考方案7】：这是我对自定义（不一致的“步长”大小）双滑块的简单解决方案（如果想法变得清晰，您可以将其修改为单滑块） 我的滑块名为“slider-euro”，文本区域名为 amount-euro，如您在代码中所见。 这个想法是有一个从 0 到 100 的滑块和一个包含 101 个位置的数组（“实值”）。滑块值被理解为该数组中的位置。唯一的事情是，当您获取滑块值时，您必须引用该数组。 这是我的例子：
$(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 )]+" €" );
);
【讨论】：
【参考方案8】：有人在 jQuery 网站上发布了这个。见：
http://forum.jquery.com/topic/non-linear-logarithmic-or-exponential-scale-for-slider
和
http://jsbin.com/ezema
这正是你所拥有的，但更简单（如 1 行代码）。
【讨论】：
【参考方案9】：如果最小值和最大值相同，则滑块值不变
改变这部分
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);
【讨论】：
【参考方案10】：不确定您是否希望滑块比例与您的值成比例*，但如果是这样，我为其他提出相同问题的人提供了解决方案。 You can find my solution here。基本上，我使用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 - 您的底部示例看起来很棒，但是，如果我使用双手柄（滑块范围），我认为它不起作用。这是正确的，如果是这样 - 我将如何修改您的代码以使其工作？非常感谢 @Alconja - 另外，这是否适用于“对齐网格”功能？看起来不是这样。 @TomHankers - “对齐网格”应该可以工作（当我构建另一个示例时），并且不，它目前不适用于双手柄，但我会看看给你的…… @Alconja - 感谢您查看双手柄。我的代码在原帖上面。 @Alconja - 哇，谢谢你的脚本。是的，你是对的 - 前几个值数组 # 无法选择 b/c 它们太小了。是否可以反转值之间的距离，以便接近值之间的距离更大，值之间的大差异之间的距离更小？ （所以滑块上 0-500 之间的距离大于 500,000-1,000,000 之间的距离【参考方案11】：您的一个选项是使用 1 的步长并引用包含您选择的值的数组。从 0 开始，一直到 20，获取 array[value_of_slider] 以获取您的实际值。我不太了解滑块，无法告诉您是否有办法为其提供一组自定义值。
【讨论】：
@Seburdis - “引用包含您选择的文件的数组。”什么文件？查看可用的演示 即有一个数组 values_array=[0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 150, 200, 250, 500, 1000, 1500 , 2000, 2500, 5000, 10000]。滑块的最小值为 0，最大值为 20。准备显示值时，使用 values_array[slider.value]。 @Chuck，你介意发布代码来实现它吗？ @TomHankers - 我的错，我在考虑值和类型的文件。现已修复。【参考方案12】：基于@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);
【讨论】：
@karim79 - 很棒的小脚本；但是，如何让它与 Range Slider（双滑块）一起使用？ @karim79 - 仍然很想知道如何让它与双手柄范围滑块一起工作:) 你可能错了，应该是这个 -->max:prices_array.length - 1 和这个 prices_array 到 prices_arr以上是关于JQuery Slider，如何改变“步长”大小的主要内容，如果未能解决你的问题，请参考以下文章
Nivo Slider Jquery 插件 - 图像自动调整大小