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更改输入值来更改滑块的值

2 个答案: