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，然后移至顶部的位置合适的手柄。