Telerik UI for Windows 8 HTML

This article describes the events of RadSlider and RadRangeSlider and their most notable event arguments.

Events

Event Name

Description

Arguments

change

Fires when the value of the slider is changed.

e.target: The RadSlider/RadRangeSlider control which value has changed.

e.value: The new value. For RadSlider this is a single numeric value, while for RadRangeSlider the returned value is an array of two numeric values representing the two ends of the newly selected range.

slide

Fires when the user drags the drag handle to a new position.

e.target: The RadSlider/RadRangeSlider control instance.

e.value: For RadSlider this is a single numeric value representing the point that the user has just moved the slider to, while for RadRangeSlider the returned value is an array of two numbers representing the two ends of the newly selected range.

Below you can see a sample where the change event is handled to access the new RadRangeSlider range.

Control definition Copy imageCopy
<div id="slider1" style="width: 300px" data-win-control="Telerik.UI.RadRangeSlider" data-win-options="{
    onchange: Slider.Helpers.change
}">
</div>
<p id="sliderInfo" style="color: #33ccff"></p>
Event handler Copy imageCopy
WinJS.Namespace.define("Slider.Helpers", {
    change: WinJS.Utilities.markSupportedForProcessing(function (e) {
        document.getElementById("sliderInfo").innerText = "Slider range was changed to: " + e.value[0] + "-" + e.value[1] + ".";
    })
});