Thursday, July 12, 2012

Asp.net jQuery UI Slider Step


In this post Asp.Net jQuery UI Slider Step we shall see how to set step increments like 5,10,15,… for a slider control.

By default the slider controls has a step value of 1, and increments by 1 when the user slider through the control, we can alter the step value using the step property as follows.
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 Step
            $("#divSliderStep").slider({
                step: 5,
                slide: function(event, ui)
                {
                    $('#txtSliderStep').val(ui.value);
                }
            });
            $('#txtSliderStep').val($('#divSliderStep').slider('value'));
        });
      </script>
</head>
<body>
    <form id="frmSlider" runat="server">
        <table>
            <tr>
                <td>Slider Step (5)</td>
                <td><asp:TextBox
                        id="txtSliderStep"
                        runat="server"></asp:TextBox>
                </td>               
                <td><div id="divSliderStep"
                        style="width:100px;"></div>
                 </td>
            </tr>
</table>
    </form>
</body>
</html>



Search Flipkart Products:
Flipkart.com

No comments: