This example uses the YUI Slider Control to implement a basic horizontal slider with tick marks & that is, with predefined intervals at which the slider thumb will stop as it's dragged. (By default, a slider thumb can be dragged one pixel at a time.)
Here are some important characteristics of this implementation:
- The slider range is 200 pixels.
- The slider movement is restricted to 20 pixel increments.
- Custom logic is applied to convert the current pixel value
(from 0 to 200) to a "real" value. In this case the "real"
range is 0 to 300.
- Once the slider has focus, the left and right keys will move
the thumb 20 pixels (changing the "real" value by 30).
- When the slider value changes, the UI is updated. The title
attribute of the slider background is updated with the current
value, and the text field is updated with the current "real"
value. These techniques can help inform assistive technologies
(like screen reader software) about the slider's current state.
