YUI Horizontal Slider

Pixel value: 0

---

Widget elements

bg-fader.gif

thumb-n.gif

Style code

<style type="text/css">

    #slider-bg {
        position: relative;
        background:url(bg-fader.gif) 5px 0 no-repeat;
        height:28px;
        width:228px; 
    }	
	
    #slider-thumb {
        position: absolute;
        top: 4px;
    }
	
</style>

JavaScript 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", 
        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;

  
    // 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);

        slider.getRealValue = function() {
            return Math.round(this.getValue() * scaleFactor);
        }

        slider.subscribe("change", function(offsetFromStart) {

            var valnode = Dom.get(valuearea);
    

            // Display the pixel value of the control
            valnode.innerHTML = offsetFromStart;

   

        });

        slider.subscribe("slideStart", function() {
                YAHOO.log("slideStart fired", "warn");
            });

        slider.subscribe("slideEnd", function() {
                YAHOO.log("slideEnd fired", "warn");
            });

  
    });
})();

</script>

 

HTML code

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

<p>Pixel value: <span id="slider-value">0</span></p>