Telerik UI for Windows 8 HTML

The two types of sliders for Windows 8 are HTML/JavaScript components that are represented by the corresponding RadSlider and RadRangeSlider types.

This topic contains the following sections.

Prerequisites

Before you declare a Telerik control in your application, make sure that you have added the references to the needed JavaScript and CSS resources, as described here:

Adding Telerik UI for Windows 8 HTML to an HTML Page

Creating Sliders

You can initialize the two types of sliders in a straightforward and similar way.

To create a RadSlider in the HTML markup, add an empty div element with a data-win-control attribute with a value of Telerik.UI.RadSlider or RadRangeSlider.

RadSlider Copy imageCopy
<div data-win-control="Telerik.UI.RadSlider">
</div>
RadRangeSlider Copy imageCopy
<div data-win-control="Telerik.UI.RadRangeSlider">
</div>

Alternatively, you can create a RadSlider programmatically through JavaScript by first defining a div element with an id and then passing it as a first argument to the RadSlider constructor:

HTML Copy imageCopy
<div id="mySlider">
</div>
RadSlider Definition Copy imageCopy
var slider = new Telerik.UI.RadSlider(document.getElementById("mySlider"));
HTML Copy imageCopy
<div id="myRangeSlider">
</div>
RadRangeSlider Definition Copy imageCopy
var rangeSlider = new Telerik.UI.RadRangeSlider(document.getElementById("myRangeSlider"));

Defining RadSlider or RadRangeSlider without setting any options will result in initializing the default versions of the controls. For RadSlider the default scale is from 0 to 10 with the measure staying at 0. Here is an image for reference:

slider-gettingstarted

For RadRangeSlider the default scale is from 0 to 10 with the whole range of the scale being initially selected. Here is an image for reference:

slider-range-gettingstarted

Setting RadSlider Options

You can set the options of the two types of sliders in a straightforward and similar way.

Just like any other Windows Runtime JavaScript control, the RadSlider options can be defined through the data-win-options attribute.

RadSlider Copy imageCopy
<!-- Define a vertical slider. -->
                                <div data-win-control="Telerik.UI.RadSlider" data-win-options="{
                                orientation:'vertical'
                                }">
                                </div>
RadRangeSlider Copy imageCopy
<!-- Define a vertical range slider. -->
                                <div data-win-control="Telerik.UI.RadRangeSlider" data-win-options="{
                                    orientation:'vertical'
                                }">
                                </div>

Alternatively, you can programmatically pass an options object as a second argument to the control constructor.

RadSlider Copy imageCopy
// Define a vertical slider.
var slider = new Telerik.UI.RadSlider(document.getElementById("mySlider"), {
    orientation: "vertical"
});
RadRangeSlider Copy imageCopy
// Define a vertical range slider.
var rangeSlider = new Telerik.UI.RadRangeSlider(document.getElementById("myRangeSlider"), {
    orientation: "vertical"
});

Here is an image of the controls with the orientation property value set to "vertical":

slider-vertical-gettingstarted

Accessing and Modifying Slider Controls

You can get ahold of the RadSlider/RadRangeSlider object the same way as the native WinJS components—find its DOM element and access its winControl property.

JavaScript Copy imageCopy
var slider = document.getElementById("mySlider").winControl;

Once you have a reference to the control, you can modify its properties as required.

JavaScript Copy imageCopy
slider.decimals = 3;

Attaching Events

You can either declare an event handler in the options object that you pass to the control during initialization, or you can use the addEventListener method to attach a function for execution upon a certain event. Below you can see samples of both approaches:

Assigning Event Handler Function During Initialization Copy imageCopy
var slider = new Telerik.UI.RadRangeSlider(document.getElementById("mySlider"), {
    onslide: slideHandlerFnName
});
// OR
var slider = new Telerik.UI.RadRangeSlider(document.getElementById("mySlider"), {
    onslide: function(e) {//...}
});
Note

If you attach the event handler using the on[eventname] property in HTML mark-up, you would need to mark the handler function as safe in your JavaScript code, using the WinJS.Utilities.markSupportedForProcessing function.

Using the addEventListener Method Copy imageCopy
slider.addEventListener("slide", slideHandlerFnName);

See Also