如何通过 jQuery 更改输入值来更改滑块的值

Question

我正在尝试在用户更改输入字段的值时更改滑块的值。

<div class="option-block">
    <label for="radius-top-left">Radius T-Left</label>
    <input id="radius-top-left" type="text" value="0" max="100" min="0">
    <div class="multi">
        <span id="slider-radius-top-left"></span>
    </div>
</div>

这是我的 HTML 代码。下面的代码是我通过改变滑块的位置来改变输入值的代码。

$("#slider-radius-top-left").slider({
    slide: function (event, ui) {
        $("#radius-top-left").val(ui.value);
        first_border_radius();          
    },
    change: function (event, ui) {
        $("#radius-top-left").val(ui.value); 
        first_border_radius();         
    }
});

Answer 1

您可以试试这样的滑块方法：

$( "#radius-top-left" ).change(function() { 
    $("#slider-radius-top-left").slider("value", $(this).val()); //option 1
    //$("#slider-radius-top-left").slider( "option", "value", $(this).val()); //option 2 - the same
});

Answer 2

使用 div 而不是 span。

<div class="option-block">
    <label for="radius-top-left">Radius T-Left</label>
    <input id="radius-top-left" type="text" value="0" max="100" min="0">
    <div class="multi">
        <div id="slider-radius-top-left"></div>
    </div>
</div>

您可以通过设置 div 元素的宽度来调整滑块的宽度。否则我能够运行你的代码顺利。

此外，为了以防万一，您应该包装滑块的激活以在文件准备就绪时开始。

<script>
$(function() {
    $( "#slider-radius-top-left" ).slider({
        ...
    });
});
</script>

如何通过 jQuery 更改输入值来更改滑块的值

How to change slider's value by changing the input value with jQuery

jquery

input

jquery-ui-slider