Hooking Up Slider Extender to Client-Side Code

Now that the RC for ASP.NET Ajax is out, we’re just around the bend from release. Thank goodness.

So I downloaded the RC and the control toolkit and started playing with the slider, since I would like to use it for a project. Unfortunately, it took me a while to figure out how to hook up clients-side javascript events to the slider. A forum post finally solved my problem. I figured I would share the solution.

Sys.Application.add_load(application_Load);
function application_Load() {
    var behavior = $find('funkyBehaviorId');
    //$find('funkyBehaviorId').add_valueChanged(function() { onDoSomething(); });
    //$find('funkyBehaviorId').add_valueChanged(onDoSomething);
    //$find('funkyBehaviorId').get_events().addHandler("valueChanged", onDoSomething);
    //behavior.add_valueChanged(function() { onDoSomething(); });
    //behavior.add_valueChanged(onDoSomething);
    behavior.get_events().addHandler("valueChanged", onDoSomething);
}
    
function onDoSomething(sender, e) {
    var div = $get('showMeSomething');
    var textbox = $get('_sliderTarget');
    div.innerHTML = "<b>" + textbox.value + "</b>";
}
<asp:Panel runat="server" ID="hi">
<asp:TextBox ID="_slider" runat="server" />
<toolkit:SliderExtender runat="server" TargetControlID="_slider" BehaviorID="funkyBehaviorId" ID="_sliderExtender" BoundControlID="_sliderTarget">
</toolkit:SliderExtender>
</asp:Panel>
    
<asp:TextBox runat="server" ID="_sliderTarget" />

<div id="showMeSomething"></div>

All of the lines in the application load method work. They are all just variations on the same theme. Use whatever style you like. Use the $find method to find the sliderextender based on its behavior id, and attach to some events. The key that I didn’t figure out for quite a while was to hook up to the slider extender via behavior id, not to its id or the id of the target. Once I found that out, everything went pretty smoothly.