New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Property Explorer

SLR Camera Search
This is a sample application scenario which shows how to implement a product configurator with RadSlider. You can use different sliders to select product characteristics and later use the values from the sliders to query a database.
  • DefaultCS.aspx
  • styles.css
<%@ Page Language="c#" AutoEventWireup="false"  %>

<!DOCTYPE html>
<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" />
</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 size-wide no-bg">
        <div class="exampleWrap">
            <h1>SLR Camera Search</h1>
            <table border="0" cellpadding="0" cellspacing="0" class="sliders">
                <tr>
                    <td>
                        <telerik:RadSlider RenderMode="Lightweight" ID="RadSlider1" runat="server" Skin="Web20" Width="506" Height="50"
                            IsSelectionRangeEnabled="true" SelectionStart="2" SelectionEnd="4" ItemType="Item"
                            TrackPosition="TopLeft">
                            <Items>
                                <telerik:RadSliderItem Text="$500" Value="500"></telerik:RadSliderItem>
                                <telerik:RadSliderItem Text="$1000" Value="1000"></telerik:RadSliderItem>
                                <telerik:RadSliderItem Text="$1,500" Value="1500"></telerik:RadSliderItem>
                                <telerik:RadSliderItem Text="$2,000" Value="2000"></telerik:RadSliderItem>
                                <telerik:RadSliderItem Text="$2,500" Value="2500"></telerik:RadSliderItem>
                                <telerik:RadSliderItem Text="$3,000" Value="3000"></telerik:RadSliderItem>
                            </Items>
                        </telerik:RadSlider>
                    </td>
                </tr>
                <tr>
                    <td style="padding-top: 38px;">
                        <telerik:RadSlider RenderMode="Lightweight" ID="RadSlider2" runat="server" Skin="Web20" Width="506" Height="50"
                            IsSelectionRangeEnabled="true" SelectionStart="4" SelectionEnd="6" ItemType="Item"
                            TrackPosition="TopLeft">
                            <Items>
                                <telerik:RadSliderItem Text="5 Mpx" Value="5"></telerik:RadSliderItem>
                                <telerik:RadSliderItem Text="6 Mpx" Value="6"></telerik:RadSliderItem>
                                <telerik:RadSliderItem Text="7 Mpx" Value="7"></telerik:RadSliderItem>
                                <telerik:RadSliderItem Text="8 Mpx" Value="8"></telerik:RadSliderItem>
                                <telerik:RadSliderItem Text="9 Mpx" Value="9"></telerik:RadSliderItem>
                                <telerik:RadSliderItem Text="10 Mpx" Value="10"></telerik:RadSliderItem>
                            </Items>
                        </telerik:RadSlider>
                    </td>
                </tr>
                <tr>
                    <td style="padding-top: 38px;">
                        <telerik:RadSlider RenderMode="Lightweight" ID="RadSlider4" runat="server" Skin="Web20" Width="506" Height="50"
                            IsSelectionRangeEnabled="true" SelectionStart="0" SelectionEnd="4" ItemType="Item"
                            TrackPosition="TopLeft">
                            <Items>
                                <telerik:RadSliderItem Text="4x" Value="4"></telerik:RadSliderItem>
                                <telerik:RadSliderItem Text="6x" Value="6"></telerik:RadSliderItem>
                                <telerik:RadSliderItem Text="8x" Value="8"></telerik:RadSliderItem>
                                <telerik:RadSliderItem Text="10x" Value="10"></telerik:RadSliderItem>
                                <telerik:RadSliderItem Text="12x" Value="12"></telerik:RadSliderItem>
                                <telerik:RadSliderItem Text="14x" Value="14"></telerik:RadSliderItem>
                            </Items>
                        </telerik:RadSlider>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance