jquery - jQuery UI Slider：连接输入文件的句柄

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 示例

当您更改输入时，它会检查您更改的输入的 ID，然后将其位置移动到相应句柄的顶部。