Home/ Questions/Q 1049213
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T16:34:48+00:00

I’m trying to implement a jQuery slider control for opacity of a certain element

  • 0

I’m trying to implement a jQuery slider control for opacity of a certain element on my web page.

Kind of like this question but with a slider.

I was wondering how I should implement this best, as I’m a little lost as how I should get started…

I’m guessing a function wouldn’t be the best, would it? Defining a function and then calling it for the slider?

The jQuery documentation for the slider control is proving to be a little too complex for me for this topic, but I’m sure some of you can help clarify how to get this thing going!

Sorry the question is kind of vague, but I’m not really sure how to proceed.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’m not sure exactly what you would like your end result to be, but here is a simple example of a slider controlling the opacity of another element on the page. I’ve included comments in my Javascript for the relevant parts.

    <!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>
    <title>Slider</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css" type="text/css"/>

    <script type="text/javascript">
        $(document).ready(function() {
            //Step 1: set up the slider with some options. The valid values for opacity are 0 to 1
            //Step 2: Bind an event so when you slide the slider and stop, the following function gets called
            $('#slider').slider({ min: 0, max: 1, step: 0.1, value: 1 })
                .bind("slidechange", function() {
                    //get the value of the slider with this call
                    var o = $(this).slider('value');
                    //here I am just specifying the element to change with a "made up" attribute (but don't worry, this is in the HTML specs and supported by all browsers).
                    var e = '#' + $(this).attr('data-wjs-element');
                    $(e).css('opacity', o)
                });
        });
    </script>
    <style type="text/css">
        #box { width: 200px; height: 200px; background-color: #ff0000; }
        #slider { width: 200px; }
    </style>
</head>
<body>
    <div id="slider" data-wjs-element="box"></div>
    <div id="box">
        <p>Fade with the above slider...</p>
    </div>
</body>
</html>
    • 0