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);

// Sliders with ticks can be animated without YAHOO.util.Anim
        slider.animate = true;

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>

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

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

Configuration for This Example

YUI Logger Output:

Slider Control Examples:

More Slider Control Resources: