Thursday, July 12, 2012

Asp.net jQuery UI Slider Set Value


In this post Asp.Net jQuery UI Slider Set Value we shall see how to set the current position value of a slider control.

Add DIV tag to the page and add the below jQuery script. 

A slider and a Set button are added to the page, in the click event of the Set button, the position of the slider is set to 25.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title> jQuery UI Slider</title>
    <link type="text/css"
href="css/smoothness/jquery-ui-1.8.21.custom.css"
rel="Stylesheet" />
    <script
type="text/javascript"
src="JavaScript/jquery-1.7.2.js"></script>
    <script
type="text/javascript"
src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
    <link
type="text/css"
href="Stylesheet.css"
rel="Stylesheet" />
    <script type="text/javascript">
        $(function() {
            // Set Slider Value
            // Initialize Silder
            $("#divSliderSetValue").slider();
            // Set Slider Value on Click of Button
            $('#cmdSet').click(function(event) {
                event.preventDefault();
                $('#divSliderSetValue').slider("option", "value", 25);
            });
        });
      </script>
</head>
<body>
    <form id="frmSlider" runat="server">
        <table>
            <tr>
                <td>Slider SetValue</td>
                <td><div id="divSliderSetValue"
                        style="width:100px;"></div>
                 </td>
                 <td>
                    <input type= "button" ID="cmdSet" Value="Set" />
                </td>               
            </tr>
</table>
    </form>
</body>
</html>


Search Flipkart Products:
Flipkart.com

No comments: