Sliders in jQuery

In this article we will see how to create a slider in jQuery with CSS. I explain the single Indicator slider that displays a value on movement.

Sliders are widgets in jQuery that allow users to change the numerical value of data by moving a cursor on a graduated axis. For example we have a slider that has a numerical value 10 to 100 and the user can use the slider for input. We don't need to insert a value from 10 to 100, we instead move the slider in the X-axis direction and values between 10 and 100 are set depending on the slider position.

Now let's see step-by-step how to create one indicator slider using jQuery and CSS.

  1. Directory structure for JavaScript and CSS files:

    Slide-in-Jquery1.jpg

  2. Create a UI Design to show a slider and slider values:

    <div>
            <h3>One Indicator Slider</h3>
            <!--Slider Creat using DIV-->
            <div id="slider"></div><br />
            <!--Show Slider values according slider events-->
            Start :<span id="valueStart"></span><br />
            Stop :<span id="valueStop"></span><br />
            Change :<span id="valueChange"></span><br />
            Slide :<span id="valueSlide"></span>
        </div>

  3. Call/link JavaScript and CSS files on the page:

    <script src="jquery/js/jquery-1.8.3.js" type="text/javascript"></script>
        <script src="jquery/js/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>   
        <link href="jqueryui/css/smoothness/jquery-ui-1.9.2.custom.min.css" rel="stylesheet"
            type="text/css" />

  4. Formatting the Slider

    We create a 200px slider with a blue color.

           #slider
            {
                width:200px;
                background:rgb(79,129,189);
            }

  5. Slider Events

        To get a slider movement we need the following four events of the slider:

    • Start

    • Stop

    • Change

    • Slide

      Now let's explain each event in detail.

      Start Event

      This event is called when the movement of the cursor starts; in other words this event is triggered when users start moving the slide.

      start: function (event)
                          {
                              var value = $("div#slider").slider("value");
                              $("#valueStart").html(value)
                          }

      Stop Event

      This event is called when the movement of the cursor finishes; in other words this event is triggered when the user stops the sliding.

      stop: function (event)
                          {
                              var value = $("div#slider").slider("value");
                              $("#valueStop").html(value)                       
                          }

      Change Event

      This event is called when the movement of a cursor finishes (the same as the stop event); in other words this event is triggered on the slide stop, or if the value is changed programmatically (by the value method).

      change: function (event)
                          {
                              var value = $("div#slider").slider("value");
                              $("#valueChange").html(value)
                          }

      Slide Event

      This event is called when the cursor is moved using drag-and-drop. This event is not called when users click directly on the axis; in other words this event is triggered on every mouse move during the slide.

      slide: function (event)
      {                        
      var
       value = $("div#slider").slider("value");
      $("#valueSlide").html(value)
      }

       

  6. The entire code for displaying the value of one indicator slider:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="OneIndicator.aspx.cs"Inherits="SliderExample.OneIndicator" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="jquery/js/jquery-1.8.3.js" type="text/javascript"></script>
        <script src="jquery/js/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>   
        <link href="jqueryui/css/smoothness/jquery-ui-1.9.2.custom.min.css" rel="stylesheet"
            type="text/css" />
             <script type="text/javascript">
                $(document).ready(function ()
                {
                    $("div#slider").slider({
                        animate: true,                  
                        start: function (event)
                        {
                            var value = $("div#slider").slider("value");
                            $("#valueStart").html(value)
                        },
                        stop: function (event)
                        {
                            var value = $("div#slider").slider("value");
                            $("#valueStop").html(value)                       
                        },
                        change: function (event)
                        {
                            var value = $("div#slider").slider("value");
                            $("#valueChange").html(value)
                        },
                        slide: function (event)
                        {
                            var value = $("div#slider").slider("value");
                            $("#valueSlide").html(value)
                        } 
                    });
                })
            </script>
            <style type="text/css">
            #slider
            {
                width:200px;
                background:rgb(79,129,189);
            }
            </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <h3>One Indicator Slider</h3>       
            <div id="slider"></div><br />       
            Start :<span id="valueStart"></span><br />
            Stop :<span id="valueStop"></span><br />
            Change :<span id="valueChange"></span><br />
            Slide :<span id="valueSlide"></span>
        </div>
        </form>
    </body>
    </html>

  7. Output slider with values:

    Slide-in-Jquery2.jpg