JSFiddle - React, Tailwind, and code Playground

by apaul34208

HTML

<svg height="20" width="35">
    <path class="volume1" d="M18,20 a 9,9 0, 1, 0, 0,-18" />
    <path class="volume1" d="M16,18 a 7,7 0, 1, 0, 0,-14" />
    <path class="volume1" d="M14,16 a 5,5 0, 1, 0, 0,-10" />
    <path class="volume1" d="M13,14 a 3,3 0, 1, 0, 0,-6 a 3,3 0, 1, 0, 0,6" />
    <path class="volume1" d="M1,7 L5,7 12,1 12,20 5,14 1,14 1,7 " />
    
</svg>
<svg height="0">
    <defs>
        <linearGradient y2="1" x2="1" id="gradient" spreadMethod="pad">
            <stop stop-color="rgba(255, 0, 0, 1)" offset="0" />
            <stop stop-color="rgba(0, 0, 0, 1)" offset="1" />
        </linearGradient>
    </defs>
</svg>
<div class="volumeSlider"></div>
<p>1</p>

CSS

body{
    background:black
}
svg {
    border: 1px solid white;
    position:relative;
    display:inline-block;
}
polygon, path {
    cursor: pointer;
    fill:url(#gradient);
    stroke: rgb(100, 100, 100);
    stroke-width:1;
    fill-opacity:0.75;
    transition: all 1s;
    display:inline-block;
}
svg:hover>polygon, svg:hover>path {
    fill-opacity:1;
    stroke-width:1;
    stroke: rgb(200, 200, 200);
    transition: all 1s;
}
.volumeSlider {
    position:absolute;
    left:40px;
    top:40px;
}

JavaScript

$('.volumeSlider').slider({
    value: 1,
    orientation: "vertical",
    range: "min",
    max: 1,
    step: 0.05,
    animate: true,
    slide: function (e, ui) {
        $('p').text(ui.value);
        var v = $('.volume1');
        for (var i = 0; i < v.length; i++) {
            (1-ui.value > 1 / v.length * (i + 1)) ? v.slice(i).hide() : v.slice(i).show()
        }
    }
});