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:
![Slide-in-Jquery1.jpg]()
- 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>
- 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:
![Slide-in-Jquery2.jpg]()