Slider - Client-side Item Management



Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

This example illustrates how to use the RadSlider's Client-side API for item management.

The RadSlider has methods that allow you to manage the control's items on the client when its property ItemType is set to Item:
  • addSliderItem(item, index) - adds a new item to the RadSlider's client-side item collection at the specified index. The settings of the item are configured by passing an object, which has properties text and value, as the item parameter of the method. If the index parameter is not set, the new item will be added at the end of the collection.
    var item = { text: "New Item" , value: "1" };

  • removeSliderItem(index) - removes an item from the RadSlider's client-side item collection. If the index parameter is not set, the last item from the collection will be removed.

Important: The changes made using the above client-side methods will affect the client item collection only. They will not be persisted on the server and will be lost after postback.

  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Language="c#"  %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <script src="scripts.js" type="text/javascript"></script>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container">
        <telerik:RadButton RenderMode="Lightweight" runat="server" ID="btnAddItem" Text="Add Item" OnClientLoad="demo.addButtonClientLoad"
            AutoPostBack="false" OnClientClicked="demo.addSliderItem" CssClass="addItemButton">
            <Icon PrimaryIconCssClass="rbAdd" />
        </telerik:RadButton>
        <telerik:RadButton RenderMode="Lightweight" runat="server" ID="btnRemoveItem" Text="Remove Item" OnClientLoad="demo.removeButtonClientLoad"
            AutoPostBack="false" OnClientClicked="demo.removeSliderItem">
            <Icon PrimaryIconCssClass="rbRemove" />
        </telerik:RadButton>
        <br />
        <br />
        <telerik:RadSlider RenderMode="Lightweight" runat="server" ID="RadSlider1" Height="60px" ItemType="Item"
            CssClass="dynamicItemsSlider" OnClientLoad="demo.sliderClientLoad">
            <Items>
                <telerik:RadSliderItem runat="server" Value="1" Text="Item 1" />
                <telerik:RadSliderItem runat="server" Value="2" Text="Item 2" />
                <telerik:RadSliderItem runat="server" Value="3" Text="Item 3" />
                <telerik:RadSliderItem runat="server" Value="4" Text="Item 4" />
            </Items>
        </telerik:RadSlider>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?