jQuery Slider Examples

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:

jQuery Slider Example

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>

jQuery Slider Example

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>

jQuery Slider Example