diff --git a/filter.html b/filter.html
index e5dc023..e238f85 100644
--- a/filter.html
+++ b/filter.html
@@ -46,22 +46,22 @@
                             <div style="width: 200px;">
                                 <div class="d-flex justify-content-center align-items-center" style="height: 30px;">
                                     <div class="d-flex redio-switche">
-                                        <input type="radio" class="btn-check" name="input1" id="inline1-on"
-                                            autocomplete="off">
-                                        <label class="btn btn-sm redio-btn on-btn" for="inline1-on">ENABLE</label>
+                                        <input type="radio" class="btn-check" name="mic1" id="mic1-on"
+                                            value="enable">
+                                        <label class="btn btn-sm redio-btn on-btn" for="mic1-on">ENABLE</label>
 
-                                        <input type="radio" class="btn-check" name="input1" id="inline1-off"
-                                            autocomplete="off">
-                                        <label class="btn btn-sm redio-btn off-btn" for="inline1-off">DISABLE</label>
+                                        <input type="radio" class="btn-check" name="mic1" id="mic1-off"
+                                            value="disable">
+                                        <label class="btn btn-sm redio-btn off-btn" for="mic1-off">DISABLE</label>
                                     </div>
 
                                 </div>
                                 <div class="mt-3">
                                     <label style="font-size:14px; color: #888;" class="me-2">Type</label>
-                                    <select class="select">
-                                        <option>Bessel</option>
-                                        <option>Butterworth</option>
-                                        <option>Linkwitz-riley</option>
+                                    <select class="select" id="mic1-type">
+                                        <option value="Bessel">Bessel</option>
+                                        <option value="Butterworth">Butterworth</option>
+                                        <option value="Linkwitz-riley">Linkwitz-riley</option>
                                     </select>
                                 </div>
                                 <div class="row _slider_customizations cus_handle mb-4">
@@ -72,16 +72,16 @@
                                             <div id="handle1" class="roundSlider"></div>
                                             <div
                                                 style="top: 100px; left: -10px; width: 50px; position:relative;color: #888;">
-                                                2000
+                                                20000
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                                 <div class="">
-                                    <input class="slider-value" style="width: 55px; text-align: center;" value="7FS" />
+                                    <input class="slider-value" id="handle1-value" style="width: 55px; text-align: center;" value="200Hz" />
                                 </div>
                                 <div class="mt-1" style="color: #888;">
-                                    HPF(Hz)
+                                    <!-- HPF(Hz) -->
                                 </div>
                             </div>
                         </div>
@@ -95,35 +95,41 @@
                             <div style="width: 200px;">
                                 <div class="d-flex justify-content-center align-items-center" style="height: 30px;">
                                     <div class="d-flex redio-switche">
-                                        <input type="radio" class="btn-check" name="input1" id="inline1-on"
-                                            autocomplete="off">
-                                        <label class="btn btn-sm redio-btn on-btn" for="inline1-on">ENABLE</label>
+                                        <input type="radio" class="btn-check" name="mic2" id="mic2-on"
+                                            value="enable">
+                                        <label class="btn btn-sm redio-btn on-btn" for="mic2-on">ENABLE</label>
 
-                                        <input type="radio" class="btn-check" name="input1" id="inline1-off"
-                                            autocomplete="off">
-                                        <label class="btn btn-sm redio-btn off-btn" for="inline1-off">DISABLE</label>
+                                        <input type="radio" class="btn-check" name="mic2" id="mic2-off"
+                                            value="disable">
+                                        <label class="btn btn-sm redio-btn off-btn" for="mic2-off">DISABLE</label>
                                     </div>
                                 </div>
                                 <div class="mt-3">
                                     <label style="font-size:14px; color: #888;" class="me-2">Type</label>
-                                    <select class="select">
-                                        <option>Bessel</option>
-                                        <option>Butterworth</option>
-                                        <option>Linkwitz-riley</option>
+                                    <select class="select" id="mic2-type">
+                                        <option value="Bessel">Bessel</option>
+                                        <option value="Butterworth">Butterworth</option>
+                                        <option value="Linkwitz-riley">Linkwitz-riley</option>
                                     </select>
                                 </div>
                                 <div class="row _slider_customizations cus_handle mb-4">
                                     <div class="block mt-4">
                                         <div class="cell d-flex justify-content-center">
+                                            <div style="top: 100px; right: -20;  width: 50px; position:relative;color: #888;"
+                                                class="text-end">20</div>
                                             <div id="handle2" class="roundSlider"></div>
+                                            <div
+                                                style="top: 100px; left: -10px; width: 50px; position:relative;color: #888;">
+                                                20000
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
                                 <div class="">
-                                    <input class="slider-value" style="width: 55px; text-align: center;" value="7FS" />
+                                    <input class="slider-value" id="handle2-value" style="width: 55px; text-align: center;" value="200Hz" />
                                 </div>
                                 <div class="mt-1" style="color: #888;">
-                                    HPF(Hz)
+                                    <!-- HPF(Hz) -->
                                 </div>
                             </div>
                         </div>
@@ -144,90 +150,82 @@
 </body>
 
 <script>
+    document.addEventListener("DOMContentLoaded", function () {
+        //初始化配置
+        loadData()
+    })
 
-    let app = (() => {
+    $(document).ready(function () {
+        $("input[name='mic1']").on('change', function () {
+            let $value = $("input[name='mic1']:checked").val()
+            alert($value)
+        })
 
-        function updateSlider(element) {
-            if (element) {
+        $("input[name='mic2']").on('change', function () {
+            let $value = $("input[name='mic2']:checked").val()
+            alert($value)
+        })
 
-                let parent = element.parentElement,
-                    lastValue = parent.getAttribute('data-slider-value');
-                let container = parent.parentElement.parentElement.parentElement.parentElement.parentElement;
+        $("#mic1-type").on('change',function(){
+            alert($("#mic1-type").val())
+        })
 
-                console.log(`${lastValue}===${element.value}}`)
-                // if (lastValue === element.value) {
-                //     return; // No value change, no need to update then
-                // }
+        $("#mic2-type").on('change',function(){
+            alert($("#mic2-type").val())
+        })
+    })
 
-                parent.setAttribute('data-slider-value', element.value);
-                let $thumb = parent.querySelector('.range-slider-thumb'),
-                    $bar = parent.querySelector('.range-slider-bar'),
-                    $value = container.querySelector('.slider-value')
-                console.log(`${element.value},${parent.clientHeight},${$thumb.clientHeight}}`)
-                console.log(`===${((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight)}===`)
-                pct = element.value * ((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight);
-
-
-
-                $thumb.style.bottom = `${pct}%`;
-                $bar.style.height = `calc(${pct}% + ${$thumb.clientHeight / 2}px)`;
-                $value.value = `${((element.value * (60 / 100)) - 60).toFixed(1)}dB`;
-            }
-        }
-        return {
-            updateSlider: updateSlider
-        };
-
-    })();
-
-    (function initAndSetupTheSliders() {
-        const inputs = [].slice.call(document.querySelectorAll('.volume-slider-container .volume-slider input'));
-        inputs.forEach(input => input.setAttribute('value', '50'));
-        inputs.forEach(input => app.updateSlider(input));
-        // Cross-browser support where value changes instantly as you drag the handle, therefore two event types.
-        inputs.forEach(input => input.addEventListener('input', element => app.updateSlider(input)));
-        inputs.forEach(input => input.addEventListener('change', element => app.updateSlider(input)));
-    })();
+    function loadData(){
+        $("input[name='mic1']").val(['enable'])
+        $("input[name='mic2']").val(['enable'])
+        $("#mic1-type").val(["Butterworth"])
+        $("#mic2-type").val(["Bessel"])
+    }
 
     $("#handle1").roundSlider({
         sliderType: "min-range",
         editableTooltip: false,
         radius: 60,
         width: 10,
-        value: 0,
-        min:20,
-        max:2000,
-        step:1,
+        value: 200,
+        min: 20,
+        max: 20000,
+        step: 1,
         handleSize: 0,
         handleShape: "square",
         circleShape: "pie",
         startAngle: 315,
-        tooltipFormat: "changeTooltip",
-        mouseScrollAction: true
+        mouseScrollAction: true,
+
+        drag: function (args) {
+            $("#handle1-value").val(`${args.value}Hz`);
+        },
+        change: function (args) {
+            $("#handle1-value").val(`${args.value}Hz`);
+        }
     });
 
-    function changeTooltip(e) {
-        var val = e.value, speed;
-        // if (val < 20) speed = "Slow";
-        // else if (val < 40) speed = "Normal";
-        // else if (val < 70) speed = "Speed";
-        // else speed = "Very Speed";
-
-        // return val + " km/h" + "<div>" + speed + "<div>";
-    }
 
     $("#handle2").roundSlider({
         sliderType: "min-range",
         editableTooltip: false,
         radius: 60,
         width: 10,
-        value: 0,
+        value: 200,
+        min: 20,
+        max: 20000,
         handleSize: 0,
         handleShape: "square",
         circleShape: "pie",
         startAngle: 315,
-        tooltipFormat: "changeTooltip",
-        mouseScrollAction: true
+        mouseScrollAction: true,
+
+        drag: function (args) {
+            $("#handle2-value").val(`${args.value}Hz`);
+        },
+        change: function (args) {
+            $("#handle2-value").val(`${args.value}Hz`);
+        }
     });
 </script>
 
diff --git a/fs.html b/fs.html
index dbd0b5d..4543050 100644
--- a/fs.html
+++ b/fs.html
@@ -165,6 +165,7 @@
         circleShape: "pie",
         startAngle: 315,
         mouseScrollAction: true,
+        
         drag: function (args) {
             $("#handle1-value").val(`${args.value}Hz`);
         },
diff --git a/home.html b/home.html
index 76be16d..b37ec8f 100644
--- a/home.html
+++ b/home.html
@@ -261,7 +261,9 @@
                                         <div>
                                             <div class="d-flex">
                                                 <div class="pinpu-box pe-4">
-                                                    <div class="equalizer-bar">
+                                                    <div class="equalizer-bar equalizer-bar-left">
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
                                                         <span style="opacity: 1;"></span>
                                                         <span style="opacity: 1;"></span>
                                                         <span style="opacity: 1;"></span>
@@ -289,7 +291,9 @@
                                                     </div>
                                                 </div>
                                                 <div class="pinpu-box pe-4">
-                                                    <div class="equalizer-bar">
+                                                    <div class="equalizer-bar equalizer-bar-right">
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
                                                         <span style="opacity: 1;"></span>
                                                         <span style="opacity: 1;"></span>
                                                         <span style="opacity: 1;"></span>
@@ -454,7 +458,9 @@
                                         <div>
                                             <div class="d-flex">
                                                 <div class="pinpu-box pe-4">
-                                                    <div class="equalizer-bar">
+                                                    <div class="equalizer-bar equalizer-bar-left">
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
                                                         <span style="opacity: 1;"></span>
                                                         <span style="opacity: 1;"></span>
                                                         <span style="opacity: 1;"></span>
@@ -482,7 +488,9 @@
                                                     </div>
                                                 </div>
                                                 <div class="pinpu-box pe-4">
-                                                    <div class="equalizer-bar">
+                                                    <div class="equalizer-bar equalizer-bar-right">
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
                                                         <span style="opacity: 1;"></span>
                                                         <span style="opacity: 1;"></span>
                                                         <span style="opacity: 1;"></span>
@@ -643,7 +651,9 @@
                                         <div>
                                             <div class="d-flex">
                                                 <div class="pinpu-box pe-4">
-                                                    <div class="equalizer-bar">
+                                                    <div class="equalizer-bar equalizer-bar-left">
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
                                                         <span style="opacity: 1;"></span>
                                                         <span style="opacity: 1;"></span>
                                                         <span style="opacity: 1;"></span>
@@ -671,7 +681,9 @@
                                                     </div>
                                                 </div>
                                                 <div class="pinpu-box pe-4">
-                                                    <div class="equalizer-bar">
+                                                    <div class="equalizer-bar equalizer-bar-right">
+                                                        <span style="opacity: 1;"></span>
+                                                        <span style="opacity: 1;"></span>
                                                         <span style="opacity: 1;"></span>
                                                         <span style="opacity: 1;"></span>
                                                         <span style="opacity: 1;"></span>
@@ -1025,40 +1037,51 @@
 
     function LineInputLeftRandomBar(number) {
         const bars = $("#lineinput .equalizer-bar-left")
-        let row = (number + 72) / 3;
-        let red = (-6 + 72) / 3;
-        let yellow = (-18 + 72) / 3;
-
-        let spans = bars[0].getElementsByTagName('span');
-        for (let i = 0; i < spans.length; i++) {
-            if (row > i) {
-                if (row >= red && i >= red) {
-                    spans[i].style.opacity = "1"
-                    spans[i].style.backgroundColor = "#ff0000"
-                }
-                else if (row >= yellow && i < red && i >= yellow) {
-                    spans[i].style.opacity = "1"
-                    spans[i].style.backgroundColor = "#ff6600"
-                }
-                else {
-                    spans[i].style.opacity = "1"
-                    spans[i].style.backgroundColor = "#a7dce9"
-                }
-            }
-            else {
-                spans[i].style.opacity = "1"
-                spans[i].style.backgroundColor = "#333"
-            }
-        }
+        updateBars(bars, number)
     }
 
     function LineInputRightRandomBar(number) {
         const bars = $("#lineinput .equalizer-bar-right")
+        updateBars(bars, number)
+    }
+
+    function Microphone1LeftRandomBar(number) {
+        const bars = $("#microphone1 .equalizer-bar-left")
+        updateBars(bars, number)
+    }
+
+    function Microphone1RightRandomBar(number) {
+        const bars = $("#microphone1 .equalizer-bar-right")
+        updateBars(bars, number)
+    }
+
+    function Microphone2LeftRandomBar(number) {
+        const bars = $("#microphone2 .equalizer-bar-left")
+        updateBars(bars, number)
+    }
+
+    function Microphone2RightRandomBar(number) {
+        const bars = $("#microphone2 .equalizer-bar-right")
+        updateBars(bars, number)
+    }
+
+    function OutputVolumeLeftRandomBar(number) {
+        const bars = $("#outputvolume .equalizer-bar-left")
+        updateBars(bars, number)
+    }
+
+    function OutputVolumeRightRandomBar(number) {
+        const bars = $("#outputvolume .equalizer-bar-right")
+        updateBars(bars, number)
+    }
+
+
+    function updateBars(element, number) {
         let row = (number + 72) / 3;
         let red = (-6 + 72) / 3;
         let yellow = (-18 + 72) / 3;
 
-        let spans = bars[0].getElementsByTagName('span');
+        let spans = element[0].getElementsByTagName('span');
         for (let i = 0; i < spans.length; i++) {
             if (row > i) {
                 if (row >= red && i >= red) {
@@ -1079,9 +1102,10 @@
                 spans[i].style.backgroundColor = "#333"
             }
         }
-
     }
 
+
+
     setInterval(() => {
         setRandomBars();
     }, 200);
@@ -1089,8 +1113,21 @@
     function setRandomBars() {
         let num = getRandomIntInclusive(0, 72)
         let num2 = getRandomIntInclusive(0, 72)
-        LineInputLeftRandomBar(num-72)
-        LineInputRightRandomBar(num2-72)
+        let num3 = getRandomIntInclusive(0, 72)
+        let num4 = getRandomIntInclusive(0, 72)
+        let num5 = getRandomIntInclusive(0, 72)
+        let num6 = getRandomIntInclusive(0, 72)
+        let num7 = getRandomIntInclusive(0, 72)
+        let num8 = getRandomIntInclusive(0, 72)
+        LineInputLeftRandomBar(num - 72)
+        LineInputRightRandomBar(num2 - 72)
+        Microphone1LeftRandomBar(num3 - 72)
+        Microphone1RightRandomBar(num4 - 72);
+        Microphone2LeftRandomBar(num5 - 72)
+        Microphone2RightRandomBar(num6 - 72);
+        OutputVolumeLeftRandomBar(num7 - 72);
+        OutputVolumeRightRandomBar(num8 - 72);
+        
     }
 
     function getRandomIntInclusive(min, max) {