You can easily change the length of the C1Slider control at run time by setting the Length property. By default the length of the control is set to 200px. In this topic you'll add a text box and button to change the control's length at run time. For information about changing the control's height and width in Design view, Source view, In Design view, and in code, instead, see Resizing the Control.
To set the control's Length property at run time, create a new AJAX-Enabled Web site project and complete the following steps:
1. Navigate to the Visual Studio Toolbox and double-click the C1Slider icon to add the control to your page.
2. Click on the Source tab to switch to Source view, and note that the body of the page looks similar to the following:
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
<cc1:C1Slider ID="C1Slider1" runat="server" Width="200px" />
</form>
</body>
3. Add the following tags just below the <cc1:C1Slider> tag to add a button and text box to set the Length property:
<br /><br />
<input type="text" value="200" id="textLength" size="3" />
<input type="button" id="btnLength" onclick="SetLength()" value="Set Length" />
4. At the top of the page, add the following JavaScript just above the opening <html> tag:
<script language="javascript" type="text/javascript">
function SetLength()
{
var slider = Sys.Application.findComponent("<%=C1Slider1.ClientID%>");
slider.set_length(document.getElementById('textLength').value);
}
</script>
This function will change the C1Slider's Length property when the button on the page is clicked.
5. Switch to Design view and note that the page now looks similar to the following:
Run the project and observe:
1. Enter 50 in the text box and click the Set Length button.
The control resizes and now appears similar to the following:
2. Enter another value, for example 500 in the text box and click the Set Length button again. The control will resize again.
|
