YUI Library JavaScript DHTML

  1. Home
  2. JavaScript DHTML
  3. YUI Library
  4. Bottom to top Vertical Slider




    
Bottom to top 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;
}









    #slide_bg {
        position: relative;
        background: url(yui_2.7.0b-assets/slider-assets/bg-v.gif) 12px 0 no-repeat;
        height: 228px;
        width: 48px; 
    }
    #slide_thumb {
        cursor: default;
        position: absolute;
        top: 200px;
    }




Bottom to top Vertical Slider



  

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



        
  • The slider range is 200 pixels.

    •     
  • CSS is used to place the slide thumb at the bottom of the slider.

    •     
  • Custom logic is added to the slider instance to convert the offset value to a "real" value calculated from a provided min/max range.

    •     
  • The custom min value is set to 10; the max 110.

    •     
  • Once the slider has focus, the up and down keys will move
    the thumb 20 pixels (changing the "real" value by 10).

    •     
  • When the slider value changes, the pixel offset and calculated value are reported below the slider.


      



    
        

    

    

Pixel offset from start: 0


    

Calculated Value: 0




YAHOO.util.Event.onDOMReady(function () {
    // the slider can move up 200 pixels
    var upLimit   = 200;
    // and down 0 pixels
    var downLimit = 0;
    // Create the Slider instance
    var slider = YAHOO.widget.Slider.getVertSlider(
                'slide_bg', 'slide_thumb', upLimit, downLimit);
    // Add a little functionality to the instance
    YAHOO.lang.augmentObject(slider, {
        // A custom value range for the slider
        minValue : 10,
        maxValue : 110,
        // A method to retrieve the calculated value, per the value range
        getCalculatedValue : function () {
            // invert the offset value so "real" values increase as the
            // slider moves up
            var offset = -1 * this.getValue();
            // Convert the offset to a value in our configured range
            var conversionFactor =
                    (this.maxValue - this.minValue) /
                    (this.thumb.topConstraint + this.thumb.bottomConstraint);
            return Math.round(offset * conversionFactor) + this.minValue;
        }
    });
    // display the native offset and the calculated while sliding
    var offset_span = YAHOO.util.Dom.get('d_offset');
    var calc_span   = YAHOO.util.Dom.get('d_val');
    slider.subscribe('change', function (offsetFromStart) {
        offset_span.innerHTML = offsetFromStart;
        calc_span.innerHTML   = this.getCalculatedValue();
    });
});





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