Как изменить значение ползунка, изменив входное значение с помощью 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>