YUI Library Examples: Slider Control: Horizontal Slider with Tick Marks

Building a Horizontal 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.
We use the Sam skin for a 200px horizontal slider and use the thumb-n.gif thumb image from the build assets
The background element is assigned a new image from the build assets.
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.
Don't apply a CSS border to the slider background

CSS:

Markup:

Code:

// The slider can move 0 pixels up
    var topConstraint = 0;

// The slider can move 200 pixels down
    var bottomConstraint = 200;

// Custom scale factor for converting the pixel offset into a real value
    var scaleFactor = 1.5;

// The amount the slider moves when the value is changed with the arrow
    // keys
    var keyIncrement = 20;

var tickSize = 20;

Event.onDOMReady(function() {

slider = YAHOO.widget.Slider.getHorizSlider(bg, 
                         thumb, topConstraint, bottomConstraint, 20);

slider.getRealValue = function() {
            return Math.round(this.getValue() * scaleFactor);
        }

slider.subscribe("change", function(offsetFromStart) {

var valnode = Dom.get(valuearea);
            var fld = Dom.get(textfield);

// Display the pixel value of the control
            valnode.innerHTML = offsetFromStart;

// use the scale factor to convert the pixel offset into a real
            // value
            var actualValue = slider.getRealValue();

// update the text box with the actual value
            fld.value = actualValue;

// Update the title attribute on the background.  This helps assistive
            // technology to communicate the state change
            Dom.get(bg).title = "slider value = " + actualValue;

});

slider.subscribe("slideStart", function() {
                YAHOO.log("slideStart fired", "warn");
            });

slider.subscribe("slideEnd", function() {
                YAHOO.log("slideEnd fired", "warn");
            });

// Listen for keystrokes on the form field that displays the
        // control's value.  While not provided by default, having a
        // form field with the slider is a good way to help keep your
        // application accessible.
        Event.on(textfield, "keydown", function(e) {

// set the value when the 'return' key is detected
            if (Event.getCharCode(e) === 13) {
                var v = parseFloat(this.value, 10);
                v = (lang.isNumber(v)) ? v : 0;

// convert the real value into a pixel offset
                slider.setValue(Math.round(v/scaleFactor));
            }
        });
        
        // Use setValue to reset the value to white:
        Event.on("putval", "click", function(e) {
            slider.setValue(100, false); //false here means to animate if possible
        });
        
        // Use the "get" method to get the current offset from the slider's start
        // position in pixels.  By applying the scale factor, we can translate this
        // into a "real value
        Event.on("getval", "click", function(e) {
            YAHOO.log("Current value: "   + slider.getValue() + "\n" + 
                      "Converted value: " + slider.getRealValue(), "info", "example"); 
        });
    });
})();
</script>

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

YUI Library Examples: Slider Control: Horizontal Slider with Tick Marks

Building a Horizontal Slider

YUI Logger Output:

Slider Control Examples:

More Slider Control Resources: