slider tied to opacity

slider tied to opacity

by mrjordy

HTML

<div id="redslider" data-wjs-element="redbox"></div>
    <div id="greenslider" data-wjs-element="greenbox"></div>
    <div id="blueslider" data-wjs-element="bluebox"></div>
    <div id="orangeslider" data-wjs-element="orangebox"></div>
    <div class="box redbox"></div>
    <div class="box bluebox"></div>
    <div class="box orangebox"></div>
    <div class="box redbox"></div>
    <div class="box greenbox"></div>
    <div class="box bluebox"></div>
    <div class="box redbox"></div>
    <div class="box orangebox"></div>
    <div class="box bluebox"></div>
    <div class="box greenbox"></div>

CSS

.box {
    width: 200px;
    height: 200px;
    position: relative;
    margin: 30px;
    z-index: 10;
    display: inline-block;
    opacity: .5;}
    
.redbox {
    background-color: red;
}
.greenbox {
    background-color: green;
}
.bluebox {
    background-color: blue;
}.orangebox {
    background-color: orange;
}
#redslider {
    width: 800px;
    margin: 20px;
    border: none;
}
#greenslider {
    width: 800px;
    margin: 20px;
    border: none;
}
#blueslider {
    width: 800px;
    margin: 20px;
    border: none;
}
#orangeslider {
    width: 800px;
    margin: 20px;
    border: none;
}


#redslider > .ui-state-default {
    border: none;
    background: red;
    padding:4px;
}
#blueslider > .ui-state-default {
    border: none;
    background: blue;
    padding:4px;
}
#orangeslider > .ui-state-default {
    border: none;
    background: orange;
    padding:4px;
}
#greenslider > .ui-state-default {
    border: none;
    background: green;
    padding:4px;
}

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
        $('#redslider').slider({
            min: 0,
            max: 1,
            step: 0.01,
            value: .5,
            orientation: "horizontal",
            slide: function (e, ui) {
                $('.redbox').css('opacity', ui.value)

            }
        })
        $('#greenslider').slider({
            min: 0,
            max: 1,
            step: 0.01,
            value: .5,
            orientation: "horizontal",
            slide: function (e, ui) {
                $('.greenbox').css('opacity', ui.value)

            }
        })
        $('#blueslider').slider({
            min: 0,
            max: 1,
            step: 0.01,
            value: .5,
            orientation: "horizontal",
            slide: function (e, ui) {
                $('.bluebox').css('opacity', ui.value)

            }
        })
        $('#orangeslider').slider({
            min: 0,
            max: 1,
            step: 0.01,
            value: .5,
            orientation: "horizontal",
            slide: function (e, ui) {
                $('.orangebox').css('opacity', ui.value)

            }
        })
    });