Slider Control: Bottom to top Vertical Slider

This example demonstrates a vertical implementation of the YUI Slider Control. Some characteristics of this implementation include the following:

• The slider range is 200 pixels.
• CSS is used to place the slide thumb at the bottom of the slider.
• Custom logic is added to the slider instance to convert the offset value to a "real" value calculated from a provided min/max range.
• The custom min value is set to 10; the max 110.
• Once the slider has focus, the up and down keys will move the thumb 20 pixels (changing the "real" value by 10).
• When the slider value changes, the pixel offset and calculated value are reported below the slider.

View example in new window.

Pixel offset from start: 0

Calculated Value: 0

Building a Bottom-Up Vertical Slider

You supply your own markup for the slider. Keep in mind the following points about markup for YUI Slider Control implementations:

• The thumb element should be a child of the slider background
• The tabindex attribute lets this element receive focus in most browsers.
• If the slider background can receive focus, the arrow keys can be used to change this slider's value.
• We use an <img> element rather than a CSS background for the thumb to get around a performance bottleneck when animating the thumb's position in IE.
• Both elements should have an explicit CSS position: relative or absolute.
• Don't apply a CSS border to the slider background

CSS:

Markup:

Invert the getValue offset

Offset values returned by the getValue() methods, or passed as a parameter to the change event callback, increase as the slider moves left-to-right and top-to-bottom. Making the value increase in the opposite direction is as simple as multiplying by -1.

Look for the magic in this code:

For horizontal Sliders, multiplying the offset by -1 makes values increase right-to-left.