Following on from the previous post, I thought it’d be nice to have the handle move on a mouse wheel. Looking around for mouse wheel integration, it seems that it’s only a short amount of code to update Prototype to use the mouse wheel. Why it’s not in the core code I don’t know, as it seems rather handy. The mouse wheel code is listed at the Prototype Event Extension article over at Ajaxian.
I decided to integrate the code directly in to Prototype, also dropping the following in to ‘observe’ and ‘stopObserving’:
Then using the same XHTML as before, which was:
<div id="slider-handle"><p id="percent"></p></div>
all you have to do is drop an event on the div#slider for the mouse wheel. That little bit of javscript looks like:
Now when you scroll the mouse wheel the slider will change by a value of 10. This value comes from the ‘Event.wheel(e) / 10’ part. The mouse wheel method returns either 1 or -1, and the slider goes from 0 to 1. Obviously, if you want the mouse wheel to move the slider by only a value or 1, then divide the delta by 100; ‘Event.wheel(e) / 100’.
As before, you can see it in action at http://dev.amnuts.com/slider/.