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

値をリアルタイムで更新したい場合は、 を使用するmousemoveか、使用するだけchangeでリアルタイムではありません。

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

便利だと思った改善点

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

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

于 2016-11-03T07:48:15.553 に答える
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

パフォーマンスを向上させるために、jquery セレクターをキャッシュすることをお勧めします。
また、ID は一意である必要があります。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 は一意である必要があります。jQuery slider()を使用できます。ここでテキスト ボックスを使用して、スライダーの値を更新できます。また、その逆も可能です。

于 2013-07-05T06:45:36.843 に答える
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 に答える