Showing posts with label jQuery UI Slider. Show all posts
Showing posts with label jQuery UI Slider. Show all posts

Monday, August 6, 2012

jQuery UI Slider

Posted by at 0 comments
Labels: ,

Thursday, July 12, 2012

Asp.net jQuery UI Slider with two handles


In this post Asp.Net jQuery UI Slider with two handles we shall see how to configure a slider controls to collect range values from the user, this can be done by setting 2 sliding buttons to the slider control, one for the start range and other for the end range.

By default the slider controls only one handler, we can modify the slider control to have 2 handlers by setting the range property to true and initializing with 2 values 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 2 Handlers
            $("#divSlider2Handlers").slider({
                range: true,
                values: [0,100],
                slide: function(event, ui) {
$('#txtSlider2Handlers').val(ui.values[0] + ' - ' + ui.values[1]);
                }
            });
            $('#txtSlider2Handlers').val($('#divSlider2Handlers').slider('values', 0) + ' - ' + $('#divSlider2Handlers').slider('values', 1));           
            });
        });
      </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>


For a full example covering all possible scenarios in using a jQuery UI Slider control refer to the post Asp.net jQuery UI Slider Tutorial

Related Posts
Asp.net jQuery UI Slider with two handles 


Posted by at 0 comments
Labels: , ,

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>


For a full example covering all possible scenarios in using a jQuery UI Slider control refer to the post Asp.net jQuery UI Slider Tutorial

Related Posts
Asp.net jQuery UI Slider with two handles 


Posted by at 0 comments
Labels: , ,

Asp.net jQuery UI Slider Event handlers


In this post Asp.Net jQuery UI Slider Event handlers we shall see how to handle the events which are triggered by the slider control.

The Slider control exposes a number of events, here we shall see on how to handle 3 most important events, start, stop and slide.

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">
        var startPosition;
        $(function() {
            //
            // Slider Events (Start, Slide, Stop)
            $("#divSliderEvents").slider({
                start: function(event, ui)
                {
                    startPosition = ui.value;
                    //alert('Slider started at: ' + ui.value);
                },
                slide: function(event, ui) {
                    $('#txtSliderEvents').val(ui.value);
                },
                stop: function(event, ui)
                {
                    alert('Slider Start Position: ' + startPosition);
                    alert('Slider End Position: ' + ui.value);
                }               
            });
            $('#txtSliderEvents').val($('#divSliderEvents').slider('value'));
        });
      </script>
</head>
<body>
    <form id="frmSlider" runat="server">
        <table>
            <tr>
                <td>Slider Events</td>
                <td><asp:TextBox
                        id="txtSliderEvents"
                        runat="server"></asp:TextBox>
                </td>               
                <td><div id="divSliderEvents"
                        style="width:100px;"></div>
                 </td>
            </tr>  
</table>
    </form>
</body>
</html>


For a full example covering all possible scenarios in using a jQuery UI Slider control refer to the post Asp.net jQuery UI Slider Tutorial

Related Posts
Asp.net jQuery UI Slider with two handles 


Posted by at 0 comments
Labels: , ,
Subscribe to: Posts (Atom)