In this step you'll customize the C1Slider control by setting its starting values and adding script to the page. The following steps assume you've completed the Step 1 of 3: Adding C1Slider to the Page topic and added the TextBox and C1Slider controls to the page.
Complete the following steps:
1. In Design view click the C1Slider control to select it.
2. Navigate to the Properties window and expand the Client-side events node, if needed.
3. Select the drop-down arrow next to OnClientValueChanged, and select Add new client side handler to switch to Source view and add the C1Slider1_OnClientValueChanged event handler.
4. Add JavaScript to the C1Slider1_OnClientValueChanged event handler so that it looks like the following :
function C1Slider1_OnClientValueChanged(sender, eventargs)
{
document.getElementById("Text1").value = $find("C1Slider1").get_value();
};
Now the text box's value will change when the C1Slider's value changes.
5. Add the following JavaScript just below the C1Slider1_OnClientValueChanged event handler:
function Text_changed()
{
var val=parseInt(document.getElementById("textBox").value);
$find("C1Slider1").set_value(val);
}
The Slider's value will now change when the text box's value changes.
6. Add onchange="Text_changed()" to the <input> Tag so it appears similar to the following:
<input id="Text1" type="text" style="width: 195px" onchange="Text_changed()" />
This links to the onchange event.
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.
|
