CODEWITHSUNDEEP
javascripthtmlinput
lowerkey
lowerkey

Reputation: 8345

How do I programmatically change the value of <input type="range" ...?

I am trying to change the value of a range slider using the mousewheel anywhere on a page, but I don't know how to programmatically change the value of the input.

Here is my code:

HTML:

<input id="slider" type="range" min="0" max="100" step="1" value="50">

Javascript:

$(window).mousewheel(function(event, delta){
    $('#slider').val($('#slider').val()*1 + delta);
});

// Another thing I tried, but didn't work:
/*
$('#slider').attr('value', oldval + 1);
*/

Any pointers are appreciated.

Upvotes: 3

Views: 4895

Answers (1)

RichardTheKiwi
RichardTheKiwi

Reputation: 107826

It is being interpreted as a string. Use this

$(window).mousewheel(function(event, delta){
    $('#slider').val($('#slider').val()*1 + delta);
//    var oldval = $('#slider').attr('value');
//    if(delta > 0)
//        document.getElementById('slider').value++;
//    else
//        document.getElementById('slider').value--;
});

// Another thing I tried, but didn't work:
/*
$('#slider').attr('value', oldval + 1);
*/

Upvotes: 5

Related Questions