CODEWITHSUNDEEP
javascripthtmljqueryjquery-events
Maldaris
Maldaris

Reputation: 13

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

I have a pair of inputs that are text and range types respectively

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

I also have a pair of jQuery functions that update the partner input as the other changes.

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

The problem is that the slider doesn't update the text field until I release the mouse button. Is there a way I could update it as it moves? I found an example using raw JavaScript that seems to work, but I can't replicate it with jQuery, even when using Chrome.

Upvotes: 1

Views: 7077

Answers (3)

GCallie
GCallie

Reputation: 413

You could use .mousmove()

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

See demo here

Upvotes: 0

Anthony Chu
Anthony Chu

Reputation: 37520

If you view the source of that page with the example, they are actually using oninput to listen to the changes while dragging (the posted source code shows onchange, which doesn't trigger until dragging is complete). To do this in jQuery, try this...

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

Demo - Fiddle

Upvotes: 6

Faran Khan
Faran Khan

Reputation: 1565

Try placing your jquery functions in document.ready like:

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

Its just a thought... Best of luck

Upvotes: 0

Related Questions