1. Standard Slider

    A basic demo of a horizontal and vertical slider similar to the script.aculo.us wiki. (added Nov 12, 2006)

  2. Reversed Slider

    Like the Standard Slider example but with the slider handles on the opposite ends and the values reversed. (added Nov 12, 2006)

  3. Slider Controlled with Mouse Wheel

    Move a slider with your mouse scroll wheel. (added Nov 12, 2006)

  4. One Slider Controlling Multiple Sliders

    Use one slider to move multiple sliders at the same time. (added Nov 12, 2006)

  5. Using Images to Spruce Up a Slider

    Use images and some CSS instead of plain boxes for the track and handle of the slider. (added Nov 12, 2006)

  6. Two Colored Slider

    As you move the handle, one side of the track stays a color and the opposite side is another color. This uses the new 'spans' option in the Slider control. (added Nov 12, 2006)

  7. Submit the Slider Value in a Form

    When you display a slider you'll probably want to submit the slider value back to your server. Here is one example on how you add the value to a hidden form field. (added Nov 12, 2006)

  8. Use a Slider as a Scrollbar

    This example makes the sliders operate as vertical and horizontal scrollbars. Part of the example has plain styling and the other is with images. Notice how there is an extra 'wrap' div around the example with images. This is to make sure that all areas are clickable on the slider. (added Nov 21, 2006)

  9. Change Slider Value by Changing Text Input Field

    Sometimes you may have a slider and a text field to show the value. This example lets you change the value in the text box and the slider will update to match the value. (added Jul 16, 2007)