In the previous article I explained what jQuery Slider is and how to use it.
Sliders in jQuery
In this article we look at how to create two-indicator Sliders and get values for both indicators. Then we will look at how to set the opacity of an image using a slider. The two examples are:
- Displaying the values of two-indicator Sliders
- Adjusting the Opacity of an image using a Slider
Let's explain one by one in details.
The directory structure for the JavaScript and CSS files is:
![Slider-example-in-JQuery1.PNG]()
CSS and JavaScript files on the web form:
<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 of Slider
<style type="text/css">
#slider
{
width:200px;
background:rgb(79,129,189);
}
</style>
Example 1
Displaying the values of a two-indicator Slider
Let's use two cursors that display the values of each event. Here options.range is set to true for two indicators and the values of indicators are retrieved by the slider method.
The entire code for a two-indicator Slider is:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TwoIndicators.aspx.cs" Inherits="SliderExample.TwoIndicators" %>
<!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,
range: true,
values: [0, 0], //initial values for cursor
start: function (event)
{
var values = $("div#slider").slider("values");
$("#valueStart").html(values[0] + ", " + values[1]);
},
stop: function (event)
{
var values = $("div#slider").slider("values");
$("#valueStop").html(values[0] + ", " + values[1]);
},
change: function (event)
{
var values = $("div#slider").slider("values");
$("#valueChange").html(values[0] + ", " + values[1]);
},
slide: function (event)
{
var values = $("div#slider").slider("values");
$("#valueSlide").html(values[0] + ", " + values[1]);
}
});
})
</script>
<style type="text/css">
#slider
{
width:200px;
background:rgb(79,129,189);
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3>Two 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>
![Slider-example-in-JQuery2.PNG]()
Example 2
Adjusting the opacity of an image using a Slider
In this example the opacity can vary from 0 to 1. On startup, it is 1, so the cursor should be at its maximum level. The value of the cursor is normally between 0 and 100. Here, we divide this value by 100 to obtain an opacity value between 0 and 1.
The entire code for the opacity of an image using a slider is:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ImageOpacity.aspx.cs" Inherits="SliderExample.ImageOpacity" %>
<!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,
slide: function (event)
{
var value = $("div#slider").slider("value");
var opacity = value / 100;
$("img").css({ opacity: opacity });
}
}).slider("value", 100);//startup value
});
</script>
<style type="text/css">
#slider
{
width:200px;
background:rgb(79,129,189);
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Image ID="logoimg" runat="server" ImageUrl="~/image/c-sharp-corner-logo.PNG" />
<br /><br />
<div id="slider"></div>
</div>
</form>
</body>
</html>
![Slider-example-in-JQuery3.PNG]()