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. When 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':
-
if (name == 'mousewheel' &&
-
(element.addEventListener))
-
name = 'DOMMouseScroll';
Then using the same XHTML as before, which was:
all you have to do is drop an event on the div#slider for the mouse wheel. That little bit of javscript looks like:
-
Event.observe('slider', 'mousewheel', function(e) {
-
slide.setValueBy((Event.wheel(e)/10));
-
});
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/.
0 Responses to “Slider - part 2 - using a mouse wheel”
Leave a Reply
You must login to post a comment.