YUI Library JavaScript DHTML


            



    
Basic Vertical Slider

/*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;
}










Basic Vertical Slider


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


The slider range is 200 pixels.

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.

The value is set to 30 after the control is initialized

Once the slider has focus, the up and down 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;
    Event.onDOMReady(function() {
        slider = YAHOO.widget.Slider.getVertSlider(bg, 
                         thumb, topConstraint, bottomConstraint);
        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");
            });
        // set an initial value
        slider.setValue(20);
        // 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)