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

【问题标题】：jQuery UI slider: multiple sliders with default valuesjQuery UI 滑块：具有默认值的多个滑块
【发布时间】：2013-06-24 14:25:23
【问题描述】：

我有一个页面，上面有多个 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);
 }
 });
});

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-slider

【解决方案1】：

用 create 事件替换你的 value 选项：

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

jsFiddle example

【讨论】：

【解决方案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"
  });
});

【讨论】：