In this topic, you will set the value of the C1Slider control to the value of an Input (Text) control using JavaScript. To learn how to set values on the server side, see Working with C1Slider Control Values.
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="btnValue" onclick="SetValue()" value="Set Value" />
4.
Add the following JavaScript beneath the <body> tag:
<script language="javascript" type="text/javascript">
function SetValue() {
// Assign variables to the slider and to the Input(Text) control's value
var slider = $find("<%=C1Slider1.ClientID%>");
var inputValue = document.getElementById('input').value;
if(inputValue>=0 && inputValue<100) {
//Set the C1Slider control's value to the Input(Text) control's value
slider.set_value(document.getElementById('input').value);
}
else
{
alert("Please enter a value between 0 and 100");
}
}
</script>
Because the C1Slider control can only accept values between 0 and 100 by default, this script also checks for a condition where the value of the Input (Text) control is ranged between 0 and 100. If the value is outside of that range, you will receive an error message.
5. Save the project and open it in a Studio for iPhone-compatible browser. The project resembles the following:
6. Enter "50" into the input box and then click Set Value. The slider's thumb glides to the halfway point of the slider's track.
You can set any value between 1 and 100. If you try to set the value lower than 0 or higher than 100, an alert box will appear.