YUI Library JavaScript DHTML


            



    
Horizontal Slider with Tick Marks

/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
  margin:0;
  padding:0;
}








#slider-bg {
    background:url(yui_2.7.0b-assets/slider-assets/bg-fader.gif) 5px 0 no-repeat;
}




Horizontal Slider with Tick Marks


  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.


Pixel value: 0

Converted value:



Change slider value to 100 (converted value 150)
Write current value to the Logger 

(function() {
    var Event = YAHOO.util.Event,
        Dom   = YAHOO.util.Dom,
        lang  = YAHOO.lang,
        slider, 
        bg="slider-bg", thumb="slider-thumb", 
        valuearea="slider-value", textfield="slider-converted-value"
    // 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"); 
        });
    });
})();





   
   
yui_2.7.0b.zip( 4,431 k)