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.

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.

• javascript
• html
• input

• It works fine here (Google Chrome 9.0.597.83), but you should consider checking if the input has focus, by changing $(window) to $('#slider') – user216441 Commented Jan 28, 2011 at 19:52
• @Joshua thanks for the tip! good idea to move the slider with the mousewheel! – Caspar Kleijne Commented Jan 28, 2011 at 19:56
• Also, if any browser add native support to that feature, then your solution will fail, try blocking the event too. – user216441 Commented Jan 28, 2011 at 19:57
• Seems to work fine in Firefox 3.6.13. In what browser is it not working? – Scott Cranfill Commented Jan 28, 2011 at 20:09
• @M28 focus doesn't seem to be the issue. I added an alert to the event handler and got the alert... (i'm using chrome as well) – lowerkey Commented Jan 28, 2011 at 20:16

1 Answer 1

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);
*/