Opacity Slider

Test whether opacity works

by mrjordy

HTML

eliminated red and blue, and we’ve increased the priority green’s priority
<body>
    <div class="less text">Less</div>
    <div class="more text">More</div>
    <div class="visualizationonly">For Visualization Purposes Only</div>
    <div id="redslider" data-wjs-element="redbox"></div>
    <div id="blueslider" data-wjs-element="bluebox"></div>
    <div id="orangeslider" data-wjs-element="orangebox"></div>
    <div id="greenslider" data-wjs-element="greenbox"></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 redbox"></div>
    <div class="box orangebox"></div>
    <div class="box bluebox"></div>
    <div class="box greenbox"></div>
    <div class="box greenbox"></div>
    <div class="box bluebox"></div>
    <div class="box greenbox"></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 greenbox"></div>
    <div class="box bluebox"></div>
    
    
</body>

CSS

body {
  width: 820px;
}
.box {
    width: 120px;
    height: 60px;
    position: relative;
    margin: 12px;
    border-radius: 10px;
    opacity: .5;
    display: inline-block;
    border: 3px solid white;
filter: drop-shadow(2px 2px 2px #bbb);
}
.redbox {background:red}
.orangebox {background:orange}
.bluebox {background:blue}
.greenbox {background:green}

#redslider {
    width: 720px;
    margin: 20px;
    border: 1px solid transparent;
}
#orangeslider {
    width: 720px;
    margin: 20px;
    border: 1px solid transparent;
}
#blueslider {
    width: 720px;
    margin: 20px;
    border: 1px solid transparent;
}
#greenslider {
    width: 720px;
    margin: 20px;
    border: 1px solid transparent;
}
#greenslider > .ui-state-default {
    border: none;
    background: green;
    padding: 4px;
}
#blueslider > .ui-state-default {
    border: none;
    background: blue;
    padding: 4px;
}
#redslider > .ui-state-default {
    border: none;
    background: red;
    padding: 4px;
}
#orangeslider > .ui-state-default {
    border: none;
    background: orange;
    padding: 4px;
}
.text {
  position: absolute;
  font-family: sans-serif;
  z-index: 50;
font-size: 30px;
top: 70px;
pointer-events: none;
opacity: .2;
}
.less {
  left: 120px;
}
.more {
  left: 590px;
  
}

.visualizationonly {
  position: absolute;
  font-family: sans-serif;
  z-index: 50;
font-size: 30px;
top: 330px;
left: 180px;
pointer-events: none;
opacity: .2;
transform: rotate(-30deg)
}

JavaScript

$(document).ready(function () {
    
        $('#redslider').slider({
            min: 0,
            max: 1,
            step: 0.01,
            value: 0.5,
            orientation: "horizontal",
            slide: function (e, ui) {
                $('.redbox').css('opacity', ui.value)

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

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

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

            }
        })
        
        
        
    });