Update style.css

style.css

@@ -165,14 +165,26 @@ p {
 }
 
 /* 슬라이더 바 주황색 */
+*/.slider-container input[type="range"] {
+    flex-grow: 1;
+    width: auto;
+    margin: 0 5px;
+    -webkit-appearance: none;
+    height: 6px;
+    border-radius: 10px;
+    background: #e0e0e0;
+    outline: none;
+}
+
+/* Chrome/Safari/Opera 슬라이더 */
 .slider-container input[type="range"]::-webkit-slider-runnable-track {
     width: 100%;
     height: 6px;
-    background: white;
+    background: linear-gradient(to right, var(--primary-color) 0%, var(--primary-color) var(--value-percent, 50%), white var(--value-percent, 50%), white 100%);
     border-radius: 10px;
+    border: 1px solid #ddd;
 }
 
-/* 슬라이더 동그라미 부분 */
 .slider-container input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
@@ -180,18 +192,25 @@ p {
     height: 18px;
     border-radius: 50%;
     background: var(--primary-color);
-    margin-top: -6px;
+    margin-top: -7px;
     cursor: pointer;
     border: 2px solid white;
     box-shadow: 0 1px 3px rgba(0,0,0,0.2);
 }
 
-/* Firefox 슬라이더 스타일 */
+/* Firefox 슬라이더 */
+.slider-container input[type="range"]::-moz-range-progress {
+    background-color: var(--primary-color);
+    height: 6px;
+    border-radius: 10px 0 0 10px;
+}
+
 .slider-container input[type="range"]::-moz-range-track {
     width: 100%;
     height: 6px;
     background: white;
     border-radius: 10px;
+    border: 1px solid #ddd;
 }
 
 .slider-container input[type="range"]::-moz-range-thumb {
@@ -204,24 +223,16 @@ p {
     box-shadow: 0 1px 3px rgba(0,0,0,0.2);
 }
 
-/* Edge/IE 슬라이더 스타일 */
-.slider-container input[type="range"]::-ms-track {
-    width: 100%;
-    height: 6px;
-    background: transparent;
-    border-color: transparent;
-    border-width: 10px 0;
-    color: transparent;
-}
-
+/* Edge/IE 슬라이더 */
 .slider-container input[type="range"]::-ms-fill-lower {
-    background: white;
-    border-radius: 10px;
+    background: var(--primary-color);
+    border-radius: 10px 0 0 10px;
 }
 
 .slider-container input[type="range"]::-ms-fill-upper {
     background: white;
-    border-radius: 10px;
+    border-radius: 0 10px 10px 0;
+    border: 1px solid #ddd;
 }
 
 .slider-container input[type="range"]::-ms-thumb {
@@ -232,6 +243,7 @@ p {
     cursor: pointer;
     border: 2px solid white;
     box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+    margin-top: 0;
 }
 
 /* 레이어 목록 스타일 */