Alessandro Gallo

SliderExtender: client-side events and some bug fixes

In the previous post about using the Slider as a trigger for the UpdatePanel, I've said that the SliderExtender is supposed to be a set-and-forget control. However, the developer must have the possibility to deal with the client-side functionality added to the asp:TextBox server control through the extender.

On client-side, the SliderExtender wraps the textbox with an instance of the Sys.UI.TextBox class, upgrading it to a MS AJAX TextBox control. Then, the slider-specific functionality, specified in the SliderBehavior class, is added as a behavior to the client-side TextBox control. The following is an example of the markup rendered on the page by the SliderExtender:

<textBox id="myTextBox">
    <behaviors>
        <slider:SliderBehavior BoundControlID="slider1_boundControl"             PageRequestManagerID="_PageRequestManager"
             HandleImageUrl="Images/slider.handle.gif" 
             EnableHandleAnimation="True" 
             RailCssClass="slider_rail" 
             id="slider1" />
    </behaviors>
</textBox>

The SliderBehavior instance, that contains the core slider functionality, can be easily accessed if we assign an ID to it. To do this, as I explained in a previous post, we have to add an Id attribute in the SliderProperties control and then use the JavaScript call $object('slider1') to get a reference to the client-side behavior.

Once we got a reference to the behavior, we can subscribe to the following events raised by the slider:

• Initialized, is raised when the behavior has completed its initialization phase.
• ValueChanged, is raised when the slider's value changes.
• SlideStart, is raised when the user starts dragging the slider's handle.
• SlideEnd, is raised when the user drops the slider's handle.

Supposing that you assigned the id "slider1" to the client-side behavior, the following code listens for the above events and displays a message on screen using the debug trace:

<script type="text/javascript">
<!--
    Sys.Application.load.add(application_Load);
    
    function application_Load() {
        var slider1 = $object('slider1');
        
        slider1.Initialized.add(onInitialized);
        slider1.SlideStart.add(onSlideStart);
        slider1.SlideEnd.add(onSlideEnd);
        slider1.ValueChanged.add(onValueChanged);
    }
    
    function onInitialized(sender, e) {
        debug.trace('initialized ' + sender.get_id());
    }
    
    function onSlideStart(sender, e) {
        debug.trace('slide start ' + sender.get_id());
    }
    
    function onSlideEnd(sender, e) {
        debug.trace('slide end ' + sender.get_id());
    }
    
    function onValueChanged(sender, e) {
        debug.trace('value changed ' + sender.get_id());
    }
//-->
</script>

If you are unsure about how events work in the MS AJAX Library, you could check this article.

Bugs in the September release and fixes.

1. SlideStart event

In the September release of the Control Toolkit there's an issue with the SliderBehavior that prevents the SlideEnd event to be raised correctly when multiple slider are present on the page. This issue has been addressed and it's fixed starting from the change set 7420, that is a development release.

2. A pathological case

This was the first discovered issue and is related to the Steps property. If we set Steps="1", a JavaScript error is raised and the slider's layout is messed. This is because a value of 1 means "one possible value" and this hasn't much sense in the case of a slider. However, this particular case isn't handled correctly and causes the nasty issue. This bug has been fixed starting from the change set 7420. I'm considering also to change the name of the Steps property since it seems not very clear that it means "number of possible values", but I'm not convinced about introducing this breaking change.

3. Registering interfaces

If you give a look at the behavior's code, you'll notice that it works even if the IDragSource and IDropTarget interfaces are not registered in the call to the registerClass() function. However, this issue is fixed starting from the change set 7420.

Dual handle Slider

This is now a planned feature!