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 Jquery

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);
}

jQuery 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)
}

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>

Output slider with values:

Slide in Jquery