Question

我正在尝试实现jQuery滑块，这似乎没问题，但是，我不是一个javascript的人，因此我很难做下一步。

我有一个滑块和一个可见的文本框。我想要做的是从滑块更新文本框，如果值直接输入文本框，则更新滑块值。

$(".amount-slider").slider({
    min: 100,
    max: 1000,
    step: 1,
    value: 300,
    animate: true,
    slide: function (event, ui) {

        $(this).next(".amount-value").val(ui.value);
    },
    create: function (event, ui) {
    }
});

有什么想法吗？

Answer 1

将事件处理程序附加到文本框并在更改时更新滑块

$(".amount-slider").slider({
    min: 100,
    max: 1000,
    step: 1,
    value: 300,
    animate: true,
    slide: function (event, ui) {
        $(this).next(".amount-value").val(ui.value);
    },
    create: function (event, ui) {
        $(this).next(".amount-value").val(300);
    }
});

$(".amount-value").on('change', function() {
    $(this).prev('.amount-slider').slider('value', this.value );
});

FIDDLE

jQuery UI滑块和文本框值双向更新

1 个答案: