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());
});

但是当你点击并移动＆＃34;滑块＆＃34;时，我想要动态输入更新的值，而不必从中释放鼠标。

编辑：我不想使用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>

jQuery动态更新输入类型范围

2 个答案: