I <3 Atlas

Extending Garbin's Slider Control (MouseWheel too!)

So, a while back, AspAdvice's own Garbin posted an article "Implementing a Slider control with the Atlas framework" and it was a really well written article. Basically he had developed a slider control using the Atlas framework.

I decided to take his work even further, and hopefully that these changes make it into a future release of the AtlasControlTookit. I'm not going to explain the "down and dirty" details of how the slider works, because Garbin's article already explains it very well.

I created a control extender, which uses Garbin's slider functionality with some additional features (LIKE WHEEL MOUSE SUPPORT). It also works well in IE/Firefox. If someone wanted to test other browsers, let me know. I'll be happy to make any changes.

LIVE DEMO!
Source Code

Updated on August 29: Cleaned up the code for event handling.

Note: The Slider that this is based off of was recently introduced into the AtlasControlToolkit by Garbin.

To use:
First, register the control for the page:

Then, there are only really two elements to a slider. The slider, and the handle. These can be defined on the page like this:
Then, add the extender to the page:


Let me explain the properties:

ID - This is the ID of the behavior, which you can use to access the extended behavior. For example, if you
     a button that you wanted to update the value on the client, you could use the following block:

    <script type="text/javascript" language="javascript">
        function btnUpdateVertical_Click(sender, e) {
            var slider = $object('verticalBehavior');
            slider.set_value(20);
        }
    </script>

TargetControl - This is the ID of the panel that will show the slider 'bar'.

DragHandleID - This is the ID of the DOM element that contains the slider 'handle'.

MinimumValue/MaximumValue - These are the limits of the slider.

Orientation - This is an enumerated property, where the slider can be set to "Horizonal" or "Vertical" modes.

Value - This is the value the slider will show when it is rendered.

DecimalCount - This is the number of significant digits that the slider will use in its value.

EnableHandleAnimation - This is a boolean setting, that enables/disables the "dragging of the slider handle".

HandleAnimationDuration - This is the amount of time that the handle takes to move between values. For example, if you click on the slider where the handle isn't, it will move to the clicked spot in 'handleAnimationDuration' amount of time.

TextBoxControlID - If you want to bind the value of the slider to the value in a textbox (a two way binding), then use this property. The extender wont try and bind if this property is not set. Then whenever the slider moves, the text will reflect the value of the slider.
       
Because I completely create the Atlas control wrapper internally, there's no existing one on the page for you to use (unless you add it through xml-script). But if you don't want to add it, and still want the value, then just access the get_bindingControlText() method which will return the text if any. For example:

            <script type="text/javascript" language="javascript">
                function btnUpdateVertical_Click(sender, e) {
                    var slider = $object('verticalBehavior');
                    slider.set_value(slider.get_bindingControlText());
                }
            </script>

           Which will set the slider to the value in the bound textbox.

ValueChangedScript - This is the javascript that will be called when the value of the slider is changed. For example:

        <script type="text/javascript" language="javascript">
            function someFunction(e) {
                // Get the value and do something with it.
                debug.trace(e.get_value());
            }
        </script>

Now. For mouse wheel control, this page describes the main method used .. but I had to slightly modify it to use the atlas method of attaching events.

The following block of code attaches a method delegate to the event of the control:

var _wheelHandler = Function.createDelegate(this, onMouseWheel);

if (this.control.element.addEventListener) {
    /* For Mozilla */
    this.control.element.addEventListener('DOMMouseScroll', _wheelHandler, false);
} else {
    /* For IE/Opera */
    this.control.element.attachEvent('onmousewheel', _wheelHandler);
}

And that works perfectly fine.