Jquery ui slider：html中的value，min和max

我正在使用jquery-ui创建一些滑块，我有一个问题如何我可以执行以下操作：

我有这个HTML代码：

 A range slider:  
  

这是js：

 $(".range-slide").each(function () { var $this = $(this); $(".slide", $this).slider({ values: [30, 60], min: 0, max: 100, range: true, slide: function (event, ui) { $("span.amount", $this).html("" + ui.values[0] + " - " + ui.values[1]); } }); $(".range-slide span.amount").html("" + $(".slide").slider("values", 0) + " - " + $(".slide").slider("values", 1)); }); 

Everyting工作正常但我怎么能这样做：

 
 A range slider:  
  

Answer 1

更改滑块以使用这些值。

 $(".slide", $this).slider({ values: [30, 60], min: $(this).attr('min'), max: $(this).attr('max'), range: true, slide: function(event, ui) { $("span.amount", $this).html("" + ui.values[0] + " - " + ui.values[1]); } }); 

更新：看看这个小提琴

 $(".range-slide div.slide").each(function() { $(this).slider({ values: [30, 60], min: parseInt($(this).attr('min')), max: parseInt($(this).attr('max')), range: true, slide: function(event, ui) { $("span.amount", $(this).parent()).html("" + ui.values[0] + " - " + ui.values[1]); } }); $(".range-slide span.amount").html("" + $(this).slider("values", 0) + " - " + $(this).slider("values", 1)); }); 

更新2使用拆分以逗号分隔值并将它们分配给变量。 小提琴

 $(".range-slide div.slide").each(function() { values = $(this).attr('value').split(','); firstVal = values[0]; secondVal = values[1]; $(this).slider({ values: [firstVal , secondVal], min: parseInt($(this).attr('min')), max: parseInt($(this).attr('max')), range: true, slide: function(event, ui) { $("span.amount", $(this).parent()).html("" + ui.values[0] + " - " + ui.values[1]); } }); $(".range-slide span.amount").html("" + $(this).slider("values", 0) + " - " + $(this).slider("values", 1)); }); 

Answer 2

未经测试的……

 $(".range-slide").each(function() { var $this = $(this); $(".slide", $this).slider({ values: $(this).attr('value').split(','), min: $(this).attr('min'), max: $(this).attr('max'), range: true, slide: function(event, ui) { $("span.amount", $this).html("" + ui.values[0] + " - " + ui.values[1]); } }); $(".range-slide span.amount").html("" + $(".slide").slider("values", 0) + " - " + $(".slide").slider("values", 1)); });