<%@ Page Language="vb" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Slider.ClientSideAPI.DefaultVB"CodeFile="DefaultVB.aspx.vb" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
<title>Telerik ASP.NET Example</title>
<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-containers">
<div class="demo-container">
<telerik:RadSlider RenderMode="Lightweight" runat="server" ID="RadSlider1" Orientation="Horizontal" OnClientLoad="demo.sliderClientLoad"
Width="370px" Height="80px" ItemType="tick" SmallChange="5" LargeChange="10" IsSelectionRangeEnabled="true"
SelectionStart="10" SelectionEnd="50">
</telerik:RadSlider>
</div>
</div>
<qsf:ConfiguratorPanel ID="ConfigurationPanel1" runat="server">
<Views>
<qsf:View>
<qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Narrow">
<ul class="fb-group">
<li>
<h4>Selection</h4>
<qsf:NumericTextBox ID="SelectionStartNtb" runat="server" Label="Start" Size="Narrow">
<NumberFormat DecimalDigits="1" />
<ClientEvents OnLoad="demo.selectionStartNtbLoad" OnValueChanged="demo.selectionStartNtbValueChange" />
</qsf:NumericTextBox>
<qsf:NumericTextBox ID="SelectionEndNtb" runat="server" Label="End" Size="Narrow">
<NumberFormat DecimalDigits="1" />
<ClientEvents OnLoad="demo.selectionEndNtbLoad" OnValueChanged="demo.selectionEndNtbValueChange" />
</qsf:NumericTextBox>
</li>
<li>
<qsf:NumericTextBox ID="WidthNtb" runat="server" Label="Width" Size="Narrow" MinValue="1">
<NumberFormat DecimalDigits="1" />
<ClientEvents OnLoad="demo.widthNtbLoad" OnValueChanged="demo.widthNtbValueChange" />
</qsf:NumericTextBox>
<qsf:NumericTextBox ID="HeightNtb" runat="server" Label="Height" Size="Narrow" MinValue="1">
<NumberFormat DecimalDigits="1" />
<ClientEvents OnLoad="demo.heightNtbLoad" OnValueChanged="demo.heightNtbValueChange" />
</qsf:NumericTextBox>
</li>
<li>
<h4>Value</h4>
<qsf:NumericTextBox ID="MinValueNtb" runat="server" Label="Min" Size="Narrow">
<NumberFormat DecimalDigits="1" />
<ClientEvents OnLoad="demo.minValueNtbLoad" OnValueChanged="demo.minValueNtbValueChange" />
</qsf:NumericTextBox>
<qsf:NumericTextBox ID="MaxValueNtb" runat="server" Label="Max" Size="Narrow">
<NumberFormat DecimalDigits="1" />
<ClientEvents OnLoad="demo.maxValueNtbLoad" OnValueChanged="demo.maxValueNtbValueChange" />
</qsf:NumericTextBox>
</li>
<li>
<qsf:NumericTextBox ID="AnimationDurationNtb" runat="server" Label="Animation Duration" Size="Narrow" MinValue="0">
<NumberFormat DecimalDigits="1" />
<ClientEvents OnValueChanged="demo.animationDurationNtbValueChange" />
</qsf:NumericTextBox>
</li>
</ul>
</qsf:ConfiguratorColumn>
<qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Narrow">
<ul class="fb-group">
<li>
<h4>Slider steps</h4>
<qsf:NumericTextBox ID="SmallChangeNtb" runat="server" Label="Small Change" Size="Narrow" MinValue="0">
<NumberFormat DecimalDigits="1" />
<ClientEvents OnValueChanged="demo.smallChangeNtbValueChange" />
</qsf:NumericTextBox>
<qsf:NumericTextBox ID="LargeChangeNtb" runat="server" Label="Large Change" Size="Narrow" MinValue="0">
<NumberFormat DecimalDigits="1" />
<ClientEvents OnValueChanged="demo.largeChangeNtbValueChange" />
</qsf:NumericTextBox>
</li>
<li>
<qsf:RadioButtonList ID="OrientationRadioButtonList" runat="server" Orientation="Horizontal" Label="Orientation" CssClass="orientation">
<asp:ListItem Text="Horizontal" Value="Horizontal" Selected="True"></asp:ListItem>
<asp:ListItem Text="Vertical" Value="Vertical"></asp:ListItem>
</qsf:RadioButtonList>
</li>
<li>
<qsf:RadioButtonList ID="TrackPositionRadioButtonList" runat="server" Label="Track Position" CssClass="trackPosition">
<asp:ListItem Text="Top Left" Value="TopLeft"></asp:ListItem>
<asp:ListItem Text="Center" Value="Center" Selected="True"></asp:ListItem>
<asp:ListItem Text="Bottom Right" Value="BottomRight"></asp:ListItem>
</qsf:RadioButtonList>
</li>
</ul>
</qsf:ConfiguratorColumn>
<qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Size="Narrow">
<ul class="fb-group checkbox-list">
<li>
<asp:CheckBox ID="EnabledRadSliderCb" runat="server" onclick="demo.toggleEnableSlider();"
Text="Enable RadSlider"></asp:CheckBox>
</li>
<li>
<asp:CheckBox ID="TrackMouseWheelCb" runat="server" onclick="demo.toggleTrackMouseWheel();"
Text="Track Mouse Wheel"></asp:CheckBox>
</li>
<li>
<asp:CheckBox ID="ShowDragHandleCb" runat="server" onclick="demo.toggleDragHandleVisible();"
Text="Show Drag Handle"></asp:CheckBox>
</li>
<li>
<asp:CheckBox ID="LiveDragCb" runat="server" onclick="demo.toggleLiveDrag();"
Text="Enable Live Drag"></asp:CheckBox>
</li>
<li>
<asp:CheckBox ID="ShowDecreaseHandleCb" runat="server" onclick="demo.toggleDecreaseHandleVisible();"
Text="Show Decrease Handle"></asp:CheckBox></li>
<li>
<asp:CheckBox ID="ShowIncreaseHandleCb" runat="server" onclick="demo.toggleIncreaseHandleVisible();"
Text="Show Increase Handle"></asp:CheckBox></li>
<li>
<asp:CheckBox ID="SelectionRangeEnabledCb" runat="server" onclick="demo.toggleIsSelectionRangeEnabled();"
Text="Enable Selection Range"></asp:CheckBox>
</li>
<li>
<asp:CheckBox ID="DirectionReversedCb" runat="server" onclick="demo.toggleIsDirectionReversed();"
Text="Reverse Direction"></asp:CheckBox>
</li>
<li>
<asp:CheckBox ID="EnableDragRangeCb" runat="server" onclick="demo.toggleEnableDragRange();"
Text="Enable DragRange"></asp:CheckBox>
</li>
</ul>
</qsf:ConfiguratorColumn>
</qsf:View>
</Views>
</qsf:ConfiguratorPanel>
</form>
</body>
</html>