In this topic, you will set the width of the C1Slider control to the value of an Input (Text) control using JavaScript.
Complete the following steps:
1. Add a C1Slider control and a ScriptManager control to your project.
2. Click the Source tab to enter Source view.
3.
Add an Input (Text) and an Input (Button) control to your project
by placing the following markup under the
</C1Slider:C1Slider> tag:
<br /><br /><br />
<input type="text" value="0" id="input" size="3" />
<input type="button" id="btnWidth" onclick="SetWidth()" value="Set Width" />
4.
Add the following JavaScript beneath the <body> tag:
<script language="javascript" type="text/javascript">
function SetWidth() {
//Find C1Slider on the client-side and assign it to a variable
var slider = $find("<%=C1Slider1.ClientID%>");
//Set the Width of the C1Slider control to the value of the Input(Text) control
slider.set_width(document.getElementById('input').value + "px");
}
</script>
5. Save the project and open it in a Studio for iPhone-compatible browser. The project resembles the following:
6. Enter "450" into the input box and then click Set Width. The slider expands to a width of 450 pixels.
