Question

我有一个页面上有多个jQuery UI滑块。滑块需要具有默认值。例如，当有人来到我的表单时，设置滑块，提交表单但是他们得到一个错误，滑块不应该重置为0.我们填写的表单的所有先前元素应该保留在原位。我知道您可以为滑块设置默认值，但我无法使用多个滑块。

我要做的是从输入字段中取值并将其用作范围滑块的默认值。您可以在下面的jsfiddle中看到我将输入的值设置为2和4.当您加载页面时，滑块都会在2处转到相同的位置。

不知何故，我需要告诉滑块获取直接位于其下方的输入值，并将其用作默认值。

关于如何做到这一点的任何想法？

http://jsfiddle.net/dmcgrew/EquTn/3/

HTML：

<div class="kpa_rate kpa_rate1">
    <label for="kpa1_rating_value">Rating 1:</label>

    <div id="1" class="slider"></div>
    <input type="text" class="kpa1_rating_value" name="kpa1_rating" value="2" />       
</div>


<div class="kpa_rate kpa_rate2">
    <label for="kpa2_rating_value">Rating 2:</label>

    <div id="2" class="slider"></div>
    <input type="text" class="kpa2_rating_value" name="kpa2_rating" value="4" />
</div>

JS：

$(function() {
    $( ".slider" ).slider({
 range: "max",
 min: 0,
 max: 5,
 value: $("input", this).val(),
 slide: function( event, ui ) {                 
     //get the id of this slider
     var id = $(this).attr("id");
     //select the input box that has the same id as the slider within it and set it's value to the current slider value. 
         $("span[class*=" + id + "]").text(ui.value);
     $("input[class*=" + id + "]").val(ui.value);
 }
 });
});

Answer 1

将您的值选项替换为create event：

create: function () {
    $(this).slider( "option", "value", $(this).next().val() );
},

<强> jsFiddle example

Answer 2

jQueryUI本身的最佳答案multiple sliders

<div id="eq">
  <span>88</span>
  <span>77</span>
  <span>55</span>
 </div>

// Script
$( "#eq > span" ).each(function() {

  // read initial values from markup and remove that
  var value = parseInt( $( this ).text(), 10 );

  $( this ).empty().slider({
    value: value,
    range: "min",
    animate: true,
    orientation: "vertical"
  });
});

jQuery UI滑块：具有默认值的多个滑块

2 个答案: