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:

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

Up Next
    Ebook Download
    View all
    Learn
    View all