通过输入更改（keyup）更改 jquery 滑块位置

Question

我试图改变 jQuery 滑块的位置不是通过滑动而是通过输入改变：

看看我的代码：

HTML 滑块输入

<input class="range-slider-single" type="text" id="width_range" data-slider-min="350" data-slider-max="6260" data-slider-step="1" data-slider-value="850" data-value="850" value="850">

HTML 输入

<input type="text" id="width" class="form-control text-center" value="850">

JS/jQuery

调用滑块

$(".range-slider-single").slider();

$(".range-slider").slider({
    formatter: function(value) {
        return currencyAttr + ThousandSeparator(parseInt(value[0])) + " - " + currencyAttr + ThousandSeparator(parseInt(value[1]));
    }
});

通过滑块改变输入：

$("#width_range").on("slide, change", function(slideEvt) {
     $("#width").val(slideEvt.value.newValue);
});

并通过输入更改滑块

$("#width").keyup(function() {
     $("#width_range").slider("value" , $(this).val())
});

但是最后一步我从 bootstrap-slider.min.js:4 得到错误““滑块实例没有这样的方法'值'”

看来我无法通过输入改变滑块的值，因为（可能）我使用属性来定义最小值和最大值？？

Answer 1

找到解决办法。

我之前在调用滑块。

代码更新：

$("#width_range").on("slide, change", function(slideEvt) {
   $("#width").val(slideEvt.value.newValue);
});
$("#height_range").on("slide, change", function(slideEvt) {
    $("#height").val(slideEvt.value.newValue);
});

$('#width').on('input', function() {
    width_range.slider('setValue', $(this).val())
});
$('#height').on('input', function() {
    height_range.slider('setValue', $(this).val())
});