HTML 范围滑块和 jQuery？

HTML Range Slider and jQuery?

提问by Chuck Bartowski

I have the code below in my website and integrated a range slider using HTML5. I want the slider to update the text-input with the value and vice versa. Would I do this using jQuery? If so can you give me example code?

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

Thanks.

谢谢。

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

回答by Ilu

You can use changeevent on slider and keyupevent on textbox to update the values.

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

HTML

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

jQuery

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

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

And jsfiddle to play with

和 jsfiddle 一起玩

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

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

回答by Kyle

If you want to refresh the value in real time use mousemove, or you can just use changebut it's not at real time.

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

$('yourselector').on('mousemove change',function() { 
    //your code
});

回答by 6by3

An improvement I found useful

我发现有用的改进

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

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

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

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

回答by Benjamin Oman

You could definitely use jQuery.

你绝对可以使用jQuery。

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

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

回答by mkutyba

Yes, you can do it with html5 elements and jQuery, like this:

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

http://jsfiddle.net/sRbHZ/

http://jsfiddle.net/sRbHZ/

HTML:

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:

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

EDIT

编辑

To allow decimals:

允许使用小数：

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

回答by Imperative

I suggest caching the jquery selectors to improve performance.
Also ids must be unique, see fiddle.

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

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

jsfiddle

jsfiddle

回答by Doink

Make your ids unique first.

首先使您的 ID 唯一。

HTML

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

回答by PSR

First Ids must be unique.You can use jQuery slider().You can use text box here to update that value in slider and vice versa

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