5

我的网站中有以下代码，并使用 HTML5 集成了一个范围滑块。我希望滑块用值更新文本输入，反之亦然。我会使用 jQuery 来做到这一点吗？如果是这样，你能给我示例代码吗？

谢谢。

<input type="text" name="chance" id="chance" class="text" value="50">

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

8 回答 8

12

您可以使用change滑块keyup上的事件和文本框上的事件来更新值。

HTML

<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%;">

jQuery

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

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

和 jsfiddle 一起玩

http://jsfiddle.net/tDkEW/1/

于 2013-07-05T06:52:53.693 回答
4

我发现有用的改进

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

jsfiddle http://jsfiddle.net/tDkEW/408/

于 2016-11-03T07:48:15.553 回答
4

如果您想实时刷新值使用mousemove，或者您可以使用change但它不是实时的。

$('yourselector').on('mousemove change',function() { 
    //your code
});
于 2016-03-30T16:29:28.423 回答
2

你绝对可以使用 jQuery。

$('input#chance').on('change', function() { 
    $('input[name=chance]').val($(this).val()); 
});

$('input[name=chance]').on('change keyup', function() {
    $('input#chance').val($(this).val());
});
于 2013-07-05T06:46:43.423 回答
1

是的，您可以使用 html5 元素和 jQuery 来实现，如下所示：

http://jsfiddle.net/sRbHZ/

HTML：

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

JS：

var slider = $('#chance_slider'),
    textbox = $('#chance');

slider.change(function() {
    var newValue = parseInt($(this).val());

    textbox.val(newValue);
});

textbox.change(function() {
    var newValue = parseInt($(this).val());

    slider.val(newValue);
});

编辑

允许小数：

var slider = $('#chance_slider'),
    textbox = $('#chance');

slider.change(function() {
    var newValue = $(this).val();

    textbox.val(newValue);
});

textbox.change(function() {
    var newValue = $(this).val();

    slider.val(newValue);
});
于 2013-07-05T06:53:21.257 回答
0

第一个 ID 必须是唯一的。您可以使用 jQuery slider()。您可以在此处使用文本框来更新滑块中的值，反之亦然

于 2013-07-05T06:45:36.843 回答
0

我建议缓存 jquery 选择器以提高性能。
ids 也必须是唯一的，见 fiddle。

var $chance_txt = $('#chance_txt'),
    $chance_slider = $('#chance_slider').on('change', function() {
        $chance_txt.val($chance_slider.val());
    });

jsfiddle

于 2013-07-05T06:46:53.427 回答
0

首先让您的 ID 独一无二。

HTML

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

jQuery

$('#slider').on('change',function(){
  $('#display').val($('#slider').val());
});
于 2013-07-05T06:51:31.480 回答