有人知道如何在当前的spring.io网站上制作3块音量控制器吗？

我想知道如何从Spring.io网站对3块音量控制器进行编码。图片如下：

---

这可以通过简单的HTML和javascript代码来完成。这是完整的JSFIDLE

基本思想很简单

首先，您需要两个SVG图像，一个是彩色的，另一个是灰度的。我在用这个2

现在创建两个绝对div，一个在另一个之上，并使用这些图像作为背景

然后创建一个与图像一样宽的滑块。我正在使用

最后根据滑块值更改顶部div的宽度

完整的HTML、CSS和JS

---

这可以通过简单的HTML和javascript代码实现。这是完整的JSFIDLE

基本思想很简单

首先，您需要两个SVG图像，一个是彩色的，另一个是灰度的。我在用这个2

现在创建两个绝对div，一个在另一个之上，并使用这些图像作为背景

然后创建一个与图像一样宽的滑块。我正在使用

最后根据滑块值更改顶部div的宽度

完整的HTML、CSS和JS

<style>
    #fader-diagram-your-app {
        position: relative;
        height: 286px;
    }

    #fader-diagram-modern-java-gray {
        position: absolute;
        height: 238px;
        width: 800px;
        margin: 31px auto;
        background: url('https://spring.io/img/homepage/diagram-modern-java-gray-9a417697a51646e42df7e9d7f024709d.svg') no-repeat;
        background-size: 100%;
    }

    #fader-diagram-modern-java-color {
        position: absolute;
        height: 238px;
        max-width: 800px;
        margin: 31px auto;
        overflow: hidden;
        width: 200px;
    }

    #fader-diagram-modern-java-color div {
        position: absolute;
        height: 238px;
        background: url('https://spring.io/img/homepage/diagram-modern-java-color-e10b7eec68b1fe60eefeab0cf20a20da.svg') no-repeat;
        background-size: 100%;
        width: 800px;
    }

    #fader {
        background-color: #34302d;
        width: 6px;
        height: 275px;
        border-radius: 4px;
        position: absolute;
        left: 0;
    }

    #myRange {
        width: 800px;
        position: absolute;
        top: 50%;
    }
</style>

<div id="fader-diagram-your-app">
    <div class="sidebyside" id="fader-diagram">
        <div id="fader-diagram-modern-java-gray"></div>
        <div id="fader-diagram-modern-java-color" style="width: 39.6875px;">
            <div></div>
        </div>
        <div id="fader">
        </div>
        <input type="range" min="0" max="800" value="0" class="slider" id="myRange">
    </div>
</div>


<script>
    var slider = document.getElementById("myRange");
    var coloredImage = document.getElementById("fader-diagram-modern-java-color");
    var fader = document.getElementById("fader");
    slider.oninput = function() {
        coloredImage.style.width = this.value + "px";
        fader.style.left = this.value + "px";
    }
</script>