jQuery UI滑塊：處理連接的輸入文件

Question

我想出瞭如何讓輸入字段在用戶移動它們後跟隨滑動手柄。當在該字段中輸入值時，滑動手柄將移動到滑塊上的正確位置，但輸入字段不會。

<input id="min" type="text" class="sliderValue" data-index="0" value="1.0" /> 
<input id="max" type="text" class="sliderValue" data-index="1" value="4.5" /> 
<div id="slider"></div> 

這裏是我的小提琴： http://jsfiddle.net/khds120/qaU7K/

任何想法如何做到這一點？

Answer 1

更改您的輸入電平變化的功能：

$("input.sliderValue").change(function() { 
    var $this = $(this); 
    $("#slider").slider("values", $this.data("index"), $this.val()); 
    var handle = $(this).attr('id') == 'min' ? 0 : 1; 
    $(this).position({ 
     my: 'center top', 
     at: 'center bottom', 
     of: $('a.ui-slider-handle:eq(' + handle + ')'), 
     offset: "0, -54" 
    }); 
}); 

jsFiddle example

當你改變一個輸入，這個檢查，看看哪一個你改變了ID，然後移至頂部的位置合適的手柄。