Why is my ASP.NET jQuery RadSlider arrow click event not firing?

Question

I'm using the Telerik RadSlider with jQuery 1.10.2. Currently I am capturing 2 events:

1. OnClientValueChanged: Fires when either the up/down arrow handles are clicked, or the drag slider is in the process of being moved.
2. OnClientSlideEnd: Fires when the drag slider has finished moving (but does not fire when the arrow handles are clicked).

My question is how can I detect when only the up/down arrow handles are clicked? Obviously I could just hook into the OnClientValueChanged (1st event above) and call the function hooked up to the OnClientSlideEnd (2nd event), but since I am doing calculations and saving values to the database each time the OnClientSlideEnd is triggered, it would be incredibly inefficient to do the calculations and save these values each time the slider handle is dragged.

Here is my current RadSlider setup. Please note that the handles are generated dynamically, but on inspecting the element in Chrome, it has a class of "rslHandle":

 $(document).ready(function myfunction() { $('.rslHandle, .rslHorizontal, .RadSlider').live('click', 'body', function () { alert('arrow clicked'); }); }); 

 <telerik:RadSlider ID="radSliderTest" runat="server" CssClass="CustomSliderLook" OnClientValueChanged="OnClientSlideChanged" OnClientSlideEnd="OnClientSlideEnd" MaximumValue="100" TrackMouseWheel="true" Width="300px" /> 

I've tried the outdated "live click", "on click", and just the plain ol' "click" method and none have triggered. Looking through Telerik's documentation for events on the RadSlider, I haven't been able to find anything for the arrow change events other than what is posted here . Thanks very much for your help!

Answer 1

Ok I found the solution. It worked by capturing the mouseup event like so:

 $(".rslHandle").live('mouseup', function (e) { alert('arrow clicked'); }); 

Answer 2

I just tried the click() jQuery way of attaching to the click event:

    function pageLoad() {
        $telerik.$(".rslHandle").click(function () { alert(1); });
    }

which uses the Sys.Application.Load (preferred for IScriptControls like this).

or

    $telerik.$(document).ready(function () {
        $telerik.$(".rslHandle").click(function () { alert(1); });
    });

where an anonymous function is attached in the document.ready jQuery event.

Both use the jQuery Telerik provide.

You can cascade the selectors and/or use the OnClientLoad event of the slider itself so you can know which is the HTML element where the slider is created.

I am not sure, however, why using the built-in events is not OK with you. If you need the final value, regardless of how many times the end user changes it, why not simply use the radSliderTest.SelectedValue property on the server ? Ultimately, the page will be POST-ed so you can get the rest of the textboxes, dropdowns, etc., so you can use this moment to get the slider value on the server without any additional code. The slider also offers the AutoPostBack property so when the user changes the value, it can POST the page and fire the OnValueChanged server event.