HTML範圍滑塊和jQuery？

我在我的網站上有下面的代碼，並使用HTML5集成了一個範圍滑塊。我希望滑塊用值更新文本輸入，反之亦然。我會用jQuery來做這個嗎？如果是的話，你可以給我示例代碼？HTML範圍滑塊和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%;">

來源

2013-07-05 Chuck Bartowski

ID應該是唯一的所有元素。 – Puuskis

ID必須是唯一的，所以你不能在一個頁面上放置2個或更多相同的ID。 –

首先ID必須是unique.You可以使用jQuery slider()。你可以使用文本框在這裏更新滑塊值，反之亦然

來源

2013-07-05 06:45:36 PSR

你肯定可以使用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-05 06:46:43

keyup是可選的 –

我建議緩存jquery選擇器來提高性能。
也ids必須是唯一的，請參閱小提琴。

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

jsfiddle

來源

2013-07-05 06:46:53 Imperative

讓你的IDS唯一的第一。

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-05 06:51:31 Doink

您可以使用滑塊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-05 06:52:53 Puuskis

請注意，在只有'keyup'事件掛鉤的文本框中，如果您只用鼠標複製粘貼，它不會更新滑塊。要應用這個功能，你也應該添加'change'事件。只是告訴邏輯背後的邏輯：當文本框失去焦點並且值發生了變化時發生'change'，每次釋放鍵盤按鈕時都會發生'keyup'。 – Puuskis

是玩，你可以用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-05 06:53:21 mkutyba

非常感謝你。但是當我使用該代碼時，它不允許小數？ –

剛剛刪除'parseInt'：更改'parseInt（$（this）.val（））;'到'$（this）.val（）;' – mkutyba

如果您想要實時刷新數值，請使用mousemove，或者您可以使用change，但它不是實時的。

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

來源

2016-03-30 16:29:28 Kyle

正在尋找無處不在的實時更新。謝謝。 – AndyDunn

的改進，我發現有用

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

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

來源

2016-11-03 07:48:15 6by3

HTML範圍滑塊和jQuery？

回答

相關問題