jQuery UI 滑块和文本框值 2 向更新答案

【问题标题】：jQuery UI slider and textbox value 2-way updatejQuery UI 滑块和文本框值 2 向更新
【发布时间】：2014-03-07 18:43:38
【问题描述】：

我正在尝试实现 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) {
    }
});

有什么想法吗？

【问题讨论】：

你能显示你的html吗？另外，alert(ui.value); 和alert($(this).prop('class')); 的结果是什么？

标签： jquery jquery-ui jquery-slider

【解决方案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

【讨论】：