Skip to content

Web nourishment by John Ford and crew

Tag Archive for mouse wheel

script.aculo.us Slider Demos and Example Code

John Ford Nov 12, 2006

Posted to Example Code, Programming, Tips

I’ve been following along the script.aculo.us Slider Demo discussion area recently and have tried to answer questions when possible. Since it’s difficult to post examples to the discussion I’ve compiled a more extensive set of Slider demos. Some are examples that I’ve wanted and others are in response to questions in the discussion area.

The demo code includes the following slider examples:

  • Standard Slider
  • Reversed Slider
  • Slider Controlled with Mouse Wheel
  • One Slider Controlling Multiple Sliders
  • Using Images to Spruce Up a Slider
  • Two Colored Slider
  • Submit the Slider Value in a Form
  • Use a Slider as a Scrollbar (added Nov 21, 2006)
  • Change Slider Value by Changing Text Input Field (added Jul 16, 2007)

It’s really amazing what you can do with the script.aculo.us library. Please let me know what you think!

* 90 Comments

Using Mouse Wheel to Control script.aculo.us Slider

John Ford Sep 30, 2006

Posted to Example Code, Programming

You may have noticed that Google Maps will zoom in and out when you use your mouse wheel (or trackpad scrolling). If you want to do the same thing using the script.aculo.us JavaScript Slider here is an example to get you started.

The example uses a slightly modified version of Adomas Paltanavicius’ mouse wheel event code. Firefox 1.5 seems to work fine but not Safari 1.3. Please let me know how it handles in other browsers.

Example: Using Mouse Wheel to Control Slider

Update: I’ve created a more extensive set of Slider demos which includes the mouse wheel demo. (Nov. 12, 2006)

* No Comments