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