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，然后将其位置移动到相应句柄的顶部。

jQuery UI Slider：具有连接输入字段的句柄

1 个答案: