YUI Library JavaScript DHTML

  1. Home
  2. JavaScript DHTML
  3. YUI Library
  4. Dual-thumb Slider with range highlight




    
Dual-thumb Slider with range highlight

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








    #demo_bg {
        position: relative;
        background: url(yui_2.7.0b-assets/slider-assets/dual_thumb_bg.gif) 0 5px no-repeat;
        height: 28px;
        width: 310px;
    }
    #demo_bg div {
        position: absolute;
        cursor: default;
        top: 4px;
    }
    #demo_bg span {
        position: absolute;
        background: url(yui_2.7.0b-assets/slider-assets/dual_thumb_highlight.gif) 0 0 repeat-x;
        top: 10px;
        left: 12px;
        height: 13px;
        width: 288px;
    }
    #demo_bg .caution {
        background-position: 0 -13px;
    }
    #demo_bg .boom,
    #demo_bg .danger {
        background-position: 0 -26px;
    }
    p .ok {
        color: #3a3;
        font-weight: bold;
        text-transform: uppercase;
    }
    p .caution {
        background: #ff3;
        color: #770;
        font-weight: bold;
        font-style: italic;
        padding: 0 1ex;
        text-transform: uppercase;
    }
    p .danger {
        color: #f33;
        font-weight: bold;
        text-decoration: blink;
        text-transform: uppercase;
    }
    p .boom {
        color: #fff;
        background: #000;
        padding: 0 1ex;
    }




Dual-thumb Slider with range highlight



  

This example demonstrates a horizontal dual-thumb Slider with custom code to add a highlight to the bounded range.  Some characteristics to note include the following:



        
  • The thumbs are set on a slide bar with a 300 pixel range.

    •     
  • The thumbs are configured with a 12 pixel tick size.

    •     
  • Clicking on the background will animate the nearest thumb.


      



    
    

    


Range offsets: 0 - 300


Status: ok



(function () {
    YAHOO.namespace('example');
    var Dom = YAHOO.util.Dom;
    // Slider has a range of 300 pixels
    var range = 300;
    // Set up 12 pixel ticks
    var tickSize = 12;
    // Some arbitrary ranges to cue status changes
    var caution_range = 150,
        danger_range  = 75,
        boom_range    = 13;
    YAHOO.util.Event.onDOMReady(function () {
        var reportSpan     = Dom.get("demo_range");
        var calculatedSpan = Dom.get("demo_value");
        // Create the DualSlider
        var slider = YAHOO.widget.Slider.getHorizDualSlider("demo_bg",
            "demo_min_thumb", "demo_max_thumb",
            range, tickSize);
        
        // Decorate the DualSlider instance with some new properties and
        // methods to maintain the highlight element
        YAHOO.lang.augmentObject(slider, {
            _status : 'ok',
            _highlight : Dom.get("demo_highlight"),
            getStatus : function () { return this._status; },
            updateHighlight : function () {
                var delta = this.maxVal - this.minVal,
                    newStatus = 'ok';
                
                if (delta < boom_range) {
                    newStatus = 'boom';
                } else if (delta < danger_range) {
                    newStatus = 'danger';
                } else if (delta < caution_range) {
                    newStatus = 'caution';
                }
                if (this._status !== newStatus) {
                    // Update the highlight class if status is changed
                    Dom.replaceClass(this._highlight,this._status,newStatus);
                    this._status = newStatus;
                }
                if (this.activeSlider === this.minSlider) {
                    // If the min thumb moved, move the highlight's left edge
                    Dom.setStyle(this._highlight,'left', (this.minVal + 12) + 'px');
                }
                // Adjust the width of the highlight to match inner boundary
                Dom.setStyle(this._highlight,'width', Math.max(delta - 12,0) + 'px');
            }
        },true);
        // Attach the highlight method to the slider's change event
        slider.subscribe('change',slider.updateHighlight,slider,true);
        // Create an event callback to update some display fields
        var report = function () {
            reportSpan.innerHTML = slider.minVal + ' - ' + slider.maxVal;
            // Call our conversion function
            calculatedSpan.innerHTML =
            calculatedSpan.className = slider.getStatus();
        };
        // Subscribe to the slider's change event to report the status.
        slider.subscribe('change',report);
        // Attach the slider to the YAHOO.example namespace for public probing
        YAHOO.example.slider = slider;
    });
})();





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