如何通过使用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>