jquery ui滑块显示值

我有一个值为1 – 5的滑块。它更新ID为’days’的隐藏输入。

$(function() { $("#slider").slider({ value: 3, min: 1, max: 5, step: 1, slide: function(event, ui) { $("#days").val(ui.value); } }); $("#days").val($("#slider").slider("value")); });​ 

我想为滑块添加标签

因此，在位置1，它将说1小时，2表示12小时，3表示1天，4 = 3天，5 = 1周。

但是我希望将天数保持为1-5

这怎么可能？

编辑

想要复制这个

Answer 1

只需安排你的标签容器（例如我添加了一个div ），当你滑动时，更新它。

实时版： http ： //jsfiddle.net/8ek4a/5/

代码：

 $(function() { var labelArr = new Array("", "1 hour", "12 hours", "1 day", "3 day", "1 week"); $( "#slider" ).slider({ value:3, min: 1, max: 5, step: 1, slide: function( event, ui ) { $( "#days" ).val( ui.value ); $("#label").html(labelArr[ui.value]); } }); $( "#days" ).val($( "#slider" ).slider( "value" ) ); $("#label").html(labelArr[$( "#slider" ).slider( "value" )]); });​ 

更新：现在我已经提出了这个实现指标的解决方案。 见http://jsfiddle.net/8ek4a/6/

Answer 2

你可以试试这段代码

  $(function() { $("#slider-range").slider({ range: true, min: 12, max: 500, values: [ 75, 300 ], slide: function( event, ui ) { $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] ); } }); $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) + "- $" + $( "#slider-range" ).slider( "values", 1 ) ); }); 

Answer 3

现在我们可以使用这个插件来显示值

 $(".slider").slider().slider("pips", { first: "pip", last: "pip" }).slider("float");