随着HTML5范围滑动条的移动，不断改变文本框的值

Change a text box's value continuously as a HTML5 range slider moves

本文关键字：改变 文本 移动 范围 HTML5 随着      更新时间：2023-09-26

我有一对分别为文本和范围类型的输入

<input type=range min=100 max=100000 val=1000 step=1000 id=priceSliderMin></input>`
<input type=text id=priceTextMin></input>

我还有一对jQuery函数，可以在其他更改时更新伙伴输入。

$('#priceSliderMin').change(function(event){
$('#priceTextMin').prop('value', parseInt($('#priceSliderMin').prop('value')));
});
$('#priceTextMin').keyup(function(event){
$('#priceSliderMin').prop('value', parseInt($('#priceTextMin').prop('value')))
})

问题是滑块不更新文本字段，直到我释放鼠标按钮。我有没有办法在它移动的时候更新它?我发现了一个使用原始JavaScript的例子，似乎可以工作，但我不能用jQuery复制它，即使使用Chrome。

如果您用示例查看该页的源代码，他们实际上使用oninput来在拖动时侦听更改(发布的源代码显示onchange，直到拖动完成才触发)。要在jQuery中执行此操作，请尝试如下…

$('#priceSliderMin').on('input', function(){
    $('#priceTextMin').val($('#priceSliderMin').val());
});

Demo - Fiddle

尝试将jquery函数放在文档中。准备:

$( document ).ready(function() {
    $('#priceSliderMin').change(function(event){
    $('#priceTextMin').prop('value', parseInt($('#priceSliderMin').prop('value')));
});
    $('#priceTextMin').keyup(function(event){
    $('#priceSliderMin').prop('value', parseInt($('#priceTextMin').prop('value')))
})
});

这只是一个想法…祝你好运

可以使用。mousmove()

$('#priceSliderMin').mousemove(function (){
    document.getElementById("range").innerHTML=this.value;
    //$("#range").html(newValue);
});

查看这里的演示

相关文章：