Thursday, July 12, 2012

Asp.net jQuery UI Slider Range


In this post Asp.Net jQuery UI Slider Range we shall see how to set a minimum and maximum range for a slider

Add DIV tag to the page and add the below jQuery script.
<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() {
            // Slider Range
            $("#divSliderRange").slider({
                min: 0,
                max: 200,
                slide: function(event, ui) {
                    $('#txtSliderRange').val(ui.value);
                }
            });
            $('#txtSliderRange').val($('#divSliderRange').slider('value'));
        });
      </script>
</head>
<body>
    <form id="frmSlider" runat="server">
        <table>
<tr>
                <td>Slider Range</td>
                <td><asp:TextBox
                        id="txtSliderRange"
                        runat="server"></asp:TextBox>
                </td>
                <td><div id="divSliderRange"
                        style="width:100px;"></div>
                 </td>
            </tr> 
</table>
    </form>
</body>
</html>


Search Flipkart Products:
Flipkart.com

No comments: