從輸入設置jQuery UI滑塊的初始值

Question

我想概括一些滑塊代碼，以便它可以使用一些輸入+滑塊組合。

我有一切基本上工作 - 滑動滑塊，輸入值更新或輸入一個數字，滑塊移動到正確的位置。

但是，我無法從輸入的默認值初始化滑塊。這裏是我的代碼如下所示：

的Javascript

$(".slider").slider({ 
     min: 0, 
     max: 5, 
     value: $(this).parent().find(".inputNumber").val(), 
     step: 0.25, 
     slide: function (event, ui) { 
      $(this).parent().find(".inputNumber").val(ui.value); 
     } 
    }); 

HTML

<div class="inputWrap hidden"> 
    <input class="mini inputNumber" type="text" value="0.5"> 
    <div class="slider"></div> 
    </div> 

Answer 1

這對我的作品（與任意數量的滑塊）：

$(".slider").slider({ 
    min: 0, 
    max: 5, 
    step: 0.25, 
    slide: function (event, ui) { 
     $(this).parent().find(".inputNumber").val(ui.value); 
    }, 
    create: function(event, ui){ 
     $(this).slider('value',$(this).parent().find(".inputNumber").val()); 
    } 
}); 

演示：http://jsfiddle.net/darkajax/uv5aC/

Answer 2

這似乎工作

$(".slider").each(function(){ 
    $(this).slider({ 
    min: 0, 
    max: 5, 
    step: 0.25, 
    slide: function (event, ui) { 
     $(this).parent().find(".inputNumber").val(ui.value); 
    } 
}).slider("option", "value", $(this).parent().find(".inputNumber").val()); 
}); 

FIDDLE