In this step you'll customize the C1Slider control. The following steps assume you've completed the Step 1 of 3: Adding C1Slider to the Page topic and added the C1Slider control to the page.

Complete the following steps:

1. In Design view, click the C1Slider control's smart tag to open the C1Slider Tasks Menu.
2. In the Theme drop-down box, select rocket to change the theme.
3. With the C1Slider control selected, navigate to the Properties window and enter 50 next to the Value property to set the initial placement of the thumb button.
4. Switch to Source view and edit the C1Slider's markup to add the OnClientButtonClick event handler. The markup will appear like the following:
   

   	Copy Code
   <cc1:C1Slider ID="C1Slider1" runat="server" onclientbuttonclick="C1Slider1_OnClientButtonClick" Value="50" />

   
   
5. Switch to Source view and edit the input control's markup to add the OnChange event handler. The markup will appear like the following:
   

   Example Title	Copy Code
   <input id="Text1" type="text" onchange="Text1_OnChange()"/>

   
   
6. In Source view, add the following markup to add JavaScript to the C1Slider1_OnClientValueChanged event handler so that it looks like the following:
   

   	Copy Code
   <script type="text/javascript" language="javascript"> function C1Slider1_OnClientButtonClick(sender, eventargs) { document.getElementById("Text1").value = $("#<%=C1Slider1.ClientID%>").c1slider("value"); }; function Text1_OnChange() { var val = parseInt(document.getElementById("Text1").value); $("#<%=C1Slider1.ClientID%>").c1slider("value", val); }; </script>

Now the text box's value will change when the C1Slider's value changes and the slider's value will now change when the text box's value changes.

In this step you've customized the controls with JavaScript. In the next (and last) step you'll run your application and see the C1Slider control in action.