Ширина элемента в реальном времени с использованием значения выходного значения диапазона в jQuery

Question

Как говорится в заголовке, я хочу получить выходное значение из диапазона ввода - (#inputValue), и сразу же после изменения значения диапазона он изменит ширину элемента (#box) ,

Я создал кнопку «button» (#buttonToApply), которая работает правильно, но необходима кнопка щелчка после изменения значения для применения новой ширины.

/* This one work, after clicking button */ 
 
$("#buttonToApply").click(function(){ 
 
$("#box").width($("#inputValue").val() + "px"); 
 
}); 
 
/* This one doesn't, real time */ 
 
$("#box").width($("#inputValue").val() + "px"); 
 

#box { 
 
    background: orange; 
 
    width: 200px; 
 
    height: 200px; 
 
}

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
 
<center> 
 
    <input id="inputValue" type="range" min="100" max="300" step="50"> 
 
<br/><br/> 
 
    <button id="buttonToApply">change width</button> 
 
<br/><br/> 
 
    <div id="box"></div> 
 
    
 
</center>

Answer 1

Для этого вам нужно запустить код, который устанавливает ширину div под change случае ползунка диапазона, например:

$("#buttonToApply").click(function() { 
 
    $("#box").width($("#inputValue").val() + "px"); 
 
}); 
 

 
$('#inputValue').change(function() { 
 
    $("#box").width($(this).val() + "px"); 
 
});

#box { 
 
    background: orange; 
 
    width: 200px; 
 
    height: 200px; 
 
}

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
 
<center> 
 
    <input id="inputValue" type="range" min="100" max="300" step="50"><br/><br/> 
 
    <button id="buttonToApply">change width</button><br/><br/> 
 
    <div id="box"></div> 
 
</center>

Кроме того, только FYI,Тэгустарел. Теперь вы должны установить text-align в своих правилах CSS.