jQuery的動態更新輸入類型範圍

Question

我試圖做這樣的事情：http://jsfiddle.net/tDkEW/1/

代碼：

<input type="text" name="chance" id="chance" class="text" value="50"> 
<input type="range" id="chanceSlider" class="vHorizon" min="0.01" max="98" step="0.01" style="background-color: #00aec8; width: 50%;"> 

$('#chanceSlider').on('change', function(){ 
    $('#chance').val($('#chanceSlider').val()); 
}); 

$('#chance').on('keyup', function(){ 
    $('#chanceSlider').val($('#chance').val()); 
}); 

但我想輸入更新的價值dynamiclly當您單擊並移動「滑塊「，而不必從中釋放鼠標。

編輯：我不想使用jQuery UI

Answer 1

事件綁定是不是「變」，它應該是「輸入」。

喜歡的東西：

$('#chanceSlider').on('input', function(){ 
    $('#chance').val($('#chanceSlider').val()); 
}); 

Answer 2

我還以爲你想一個小滑塊......我已經創建it from great help from css-tricks article

希望這有助於有人某一天......

Working Fiddle

<div id="line"> 
    <hr/> 
</div> 
<div id="bar"></div> 
<div id="show">0</div>