jQuery UI滑块和TextBox值2向更新

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 );
});

小提琴