JQuery UI滑块：使用属性设置最小和最大值

Question

我需要在同一页面中使用多个滑块。因此，我创建了一个滑块类（所以只有一个jQuery代码），我想将最大值和最小值设置为div的属性。然后它们将根据所选的滑块进行更改。

我猜想要做到这一点，我需要在某个时候使用this，否则它会针对每个班级。尽管我不知道从哪里开始或将其包含在哪里。

现在我刚刚申请的基本代码，那就是：

HTML：

<div class="slider" slider-min="15" slider-max="250" svalue="132"></div><span class="slider-value"></span> 
<div class="slider" slider-min="30" slider-max="300" svalue="165"></div><span class="slider-value"></span> 
<div class="slider" slider-min="100" slider-max="500" svalue="300"></div><span class="slider-value"></span> 

CSS：

.ui-slider { position: relative; text-align: left; background: #DADDD8; z-index: 0; } 
.ui-slider { -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5) inset; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5) inset; box-shadow: 0 1px 2px rgba(0,0,0,0.5) inset; } 
.ui-slider .ui-slider-handle { background: #8FB339; position: absolute; z-index: 2; width: 15px; height: 15px; border-radius:5px; cursor:pointer; } 
.ui-slider .ui-state-hover, .ui-slider .ui-state-active { background: #4B5842; } 
.ui-slider .ui-slider-range { background: #C7D59F; position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; } 
.ui-slider .ui-slider-range { -moz-box-shadow: 0 1px 2px rgba(17,35,45,0.6) inset; -webkit-box-shadow: 0 1px 2px rgba(17,35,45,0.6) inset; box-shadow: 0 1px 2px rgba(17,35,45,0.6) inset; } 


.ui-slider-horizontal { height: 5px; width:100px; margin:5px auto; } 
.ui-slider-horizontal .ui-slider-handle { top: -5px; margin-left: -5px; } 
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } 
.ui-slider-horizontal .ui-slider-range-min { left: 0; } 
.ui-slider-horizontal .ui-slider-range-max { right: 0; } 

.slider-value{ 
    font-size:12px; 
    float:right; 
    margin-top:-16px; 
    margin-right:5px; 
} 

JS/JQUERY：

$(function() { 
    var div = $(".slider"); 
    $(".slider").slider({ 
     range: "min", 
     slide: function(event, ui) { 
       $(".slider-value").html(ui.value); 
      }, 
     min: div.data("slider-min"), 
     max: div.data("slider-max"), 
     value: div.data("svalue"), 
})}); 

$(".slider-value").html( $(this).slider('value')); 

Here是这个演示上的jsfiddle

，虽然我在这，我这有其他问题与类/多滑块的事：当我想显示当前值 ONE滑块，因为它是一个类，它会更改所有的.slider-value范围。我不知道从哪里开始解决这个问题。

谢谢你的时间/帮助:)

Answer 1

好吧，你是在正确的道路上，但你扔在一个有几件事情是多余的，大概是从尝试的东西，忘记删除它们。

我修改了一下你的代码，让你有可重用的功能。我也嵌套在滑块相同的div内的值域。这是为了向你展示jQuery如何轻松地找到相关的元素，但是你可以用其他方式将它们联系起来，而不必将它们嵌套在一起......请注意，我没有修复CSS，所以它有点搞砸了，但是你能明白这一点自己......

最大的变化真的是虽然使用ID属性，使用jQuery选择时，3种主要的类型，您可以使用（尽管有其他人），是CSS类别选择器$(".slider"),元件选择器$("div")和ID选择器$("#slider1")。

刚刚尝试了以下更改HTML和JavaScript：

的JavaScript/jQuery的：

var func = function(div) { 
    var slide = $(div).slider({ 
     range: "min", 
     slide: function(event, ui) { 
       $(div).find(".slider-value").html(ui.value); 
      }, 
     min: parseInt(div.attr("slider-min")), 
     max: parseInt(div.attr("slider-max")), 
     value: parseInt(div.attr("svalue")), 
    }) 
}; 

func($("#slider1")); 
func($("#slider2")); 
func($("#slider3")); 

HTML：

<div class="slider" id="slider1" slider-min="15" slider-max="250" svalue="132"><span class="slider-value"></span> 
</div> 


<div class="slider" id="slider2" slider-min="30" slider-max="300" svalue="165"><span class="slider-value"></span></div> 


<div class="slider" id="slider3" slider-min="100" slider-max="500" svalue="300"><span class="slider-value"></span></div>