diff --git a/css/app.css b/css/app.css
index aa87703..5becffa 100644
--- a/css/app.css
+++ b/css/app.css
@@ -528,12 +528,31 @@ body {
   background-image: url(../images/button.png);
 }
 
+.slider-value{
+  border: none;
+  background: #000;
+  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.35), 0 2px 0 rgba(255, 255, 255, 0.15);
+  color: #fff;
+  border-radius: 5px;
+}
+
+.slider-value:focus{
+  border: none;
+  background: #000;
+  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.35), 0 2px 0 rgba(255, 255, 255, 0.15);
+  color: #fff;
+  border-radius: 5px;
+  outline: none;
+}
+
 
 
 .volume-ruler {
   position: relative;
   width: 14px;
-  height: 300px;
+  height: 250px;
+  margin-top: 20px;
+  margin-bottom: 20px;
 }
 
 .volume-ruler .cm {
@@ -565,56 +584,40 @@ body {
   top: 0%;
 }
 
-.volume-ruler .cm:nth-of-type(1):after {
-  content: "0";
-}
 
 .volume-ruler .cm:nth-of-type(2) {
   top: 16.6666%;
 }
 
-.volume-ruler .cm:nth-of-type(2):after {
-  content: "1";
-}
 
 .volume-ruler .cm:nth-of-type(3) {
   top: 33.3333%;
 }
 
-.volume-ruler .cm:nth-of-type(3):after {
-  content: "2";
-}
 
 .volume-ruler .cm:nth-of-type(4) {
   top: 50%;
 }
 
-.volume-ruler .cm:nth-of-type(4):after {
-  content: "3";
-}
 
 .volume-ruler .cm:nth-of-type(5) {
   top: 66.6666%;
 }
 
-.volume-ruler .cm:nth-of-type(5):after {
-  content: "4";
-}
-
 .volume-ruler .cm:nth-of-type(6) {
   top: 83.3333%;
 }
-
-.volume-ruler .cm:nth-of-type(6):after {
-  content: "5";
-}
-
 .volume-ruler .cm:nth-of-type(7) {
   top: 100%;
 }
 
-.volume-ruler .cm:nth-of-type(7):after {
-  content: "6";
+
+.volume-ruler .cm>span{
+  position: absolute;
+  right: -25px;
+  top: -7px;
+  font: 11px/1 sans-serif;
+  color: #555;
 }
 
 
diff --git a/volume.html b/volume.html
index f5df57d..df148a4 100644
--- a/volume.html
+++ b/volume.html
@@ -38,7 +38,7 @@
                         <div class="divider-text"><span class="fw-bold">MIC 1</span></div>
                     </div>
                     <div class="p-3 d-flex justify-content-center">
-                        <div style="width: 350px;">
+                        <div style="width: 320px;">
                             <div class="d-flex justify-content-center align-items-center">
                                 <div class="me-3">48V Phantom</div>
                                 <div class="d-flex redio-switche">
@@ -51,53 +51,66 @@
                                     <label class="btn" for="option6">OFF</label>
                                 </div>
                             </div>
-                            <div class="d-flex justify-content-center mt-3" style="height: 350px;">
-                                <div class="d-flex">
-                                    <div class="volume-slider-box">
-                                        <div class="volume-slider" data-slider-value="50">
-                                            <input type="range" orient="vertical" min="0" max="100" value="50">
-                                            <div class="range-slider-bar" style="height: calc(45% + 15px);"></div>
-                                            <div class="range-slider-thumb" style="bottom: 45%;"></div>
+                            <div class="volume-slider-container">
+                                <div class="d-flex justify-content-center mt-3">
+                                    <div class="d-flex">
+                                        <div class="volume-slider-box">
+                                            <div class="volume-slider" data-slider-value="50">
+                                                <input type="range" orient="vertical" min="0" max="60" step="0.1" value="30">
+                                                <div class="range-slider-bar" style="height: calc(45% + 15px);"></div>
+                                                <div class="range-slider-thumb" style="bottom: 45%;"></div>
+                                            </div>
+                                        </div>
+                                        <div>
+                                            <section class="volume-ruler">
+                                                <section class="cm">
+                                                    <span>0</span>
+                                                    <section class="mm"></section>
+                                                </section>
+                                                <section class="cm">
+                                                    <span>-10</span>
+                                                    <section class="mm"></section>
+                                                </section>
+                                                <section class="cm">
+                                                    <span>-20</span>
+                                                    <section class="mm"></section>
+                                                </section>
+                                                <section class="cm">
+                                                    <span>-30</span>
+                                                    <section class="mm"></section>
+                                                </section>
+                                                <section class="cm">
+                                                    <span>-40</span>
+                                                    <section class="mm"></section>
+                                                </section>
+                                                <section class="cm">
+                                                    <span>-50</span>
+                                                    <section class="mm"></section>
+                                                </section>
+                                                <section class="cm">
+                                                    <span>-60</span>
+                                                </section>
+                                            </section>
                                         </div>
                                     </div>
                                     <div>
-                                        <section class="volume-ruler">
-                                            <section class="cm">
-                                                <section class="mm"></section>
-                                            </section>
-                                            <section class="cm">
-                                                <section class="mm"></section>
-                                            </section>
-                                            <section class="cm">
-                                                <section class="mm"></section>
-                                            </section>
-                                            <section class="cm">
-                                                <section class="mm"></section>
-                                            </section>
-                                            <section class="cm">
-                                                <section class="mm"></section>
-                                            </section>
-                                            <section class="cm">
-                                                <section class="mm"></section>
-                                            </section>
-                                            <section class="cm">
-                                            </section>
-                                        </section>
                                     </div>
                                 </div>
                                 <div>
-
+                                    <div class="slider-value-box">
+                                        <input class="slider-value" style="width: 50px;" />
+                                    </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
                 <div class="form">
-                    
+
                     <div>
                         <div class="progress-4"></div>
                     </div>
-                    
+
                     <div>
                     </div>
                     <div>
@@ -182,21 +195,26 @@
 
         function updateSlider(element) {
             if (element) {
+            
                 let parent = element.parentElement,
                     lastValue = parent.getAttribute('data-slider-value');
+let container = parent.parentElement.parentElement.parentElement.parentElement;
 
-                if (lastValue === element.value) {
-                    return; // No value change, no need to update then
-                }
+console.log(`${lastValue}===${element.value}}`)
+                // if (lastValue === element.value) {
+                //     return; // No value change, no need to update then
+                // }
 
                 parent.setAttribute('data-slider-value', element.value);
                 let $thumb = parent.querySelector('.range-slider-thumb'),
                     $bar = parent.querySelector('.range-slider-bar'),
-                    pct = element.value * ((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight);
+                    $value = container.querySelector('.slider-value')
+                    console.log(`${element.value},${parent.clientHeight},${$thumb.clientHeight}}`)
+                pct = element.value * ((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight);
 
                 $thumb.style.bottom = `${pct}%`;
                 $bar.style.height = `calc(${pct}% + ${$thumb.clientHeight / 2}px)`;
-                // $thumb.textContent = `${element.value}%`;
+                $value.value = `${element.value-60}`;
             }
         }
         return {
@@ -206,7 +224,7 @@
     })();
 
     (function initAndSetupTheSliders() {
-        const inputs = [].slice.call(document.querySelectorAll('.volume-slider input'));
+        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.