Sliders in jQuery

Article

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.

Directory structure for JavaScript and CSS files:
Create a UI Design to show a slider and slider values:
<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>
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" />
Formatting the Slider

We create a 200px slider with a blue color.
       #slider
{
  width:200px;
  background:rgb(79,129,189);
}
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:

Up Next

Ebook Download

View all

Printing in C# Made Easy

Read by 10.8k people

Download Now!

Learn

View all