YUI vertical slider

Red Green Blue

---

Widget elements

Images

thumb-bar.gif

bg-v.gif

Style code

<style type="text/css">
    #slider-bg {
        position: relative;
        background:url(bg-v.gif) 12px 0 no-repeat;
        height:228px;
        width:48px; 
    }

    #slider-thumb {
        position: absolute;
    }
</style>		
	

HTML code

<div id="slider-bg" tabindex="-1" title="Slider">
    	<div id="slider-thumb"><img src="thumb-bar.gif"></div>
</div>	
	

JavaScript includes and code

<!-- Dependencies --> 
<script src = "yahoo-dom-event.js" ></script>
<script src = "dragdrop-min.js" ></script>
  
<!-- Slider source file --> 

<script src = "slider-min.js" ></script>	
	
<script type="text/javascript">
(function() {
    var Event = YAHOO.util.Event,
        Dom   = YAHOO.util.Dom,
        lang  = YAHOO.lang,
        slider, 
        bg="slider-bg", thumb="slider-thumb", 
        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 fld = Dom.get(textfield);            
			
            // use the scale factor to convert the pixel offset into a real
            // value
            var actualValue = slider.getRealValue();			
	
            ////////////////////////////////////////// 	
            // Do something with the 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(0);

        // 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));
            }
        });
        
    });
})();
</script>