track-before introduced into Slider component

src/common/Slider/Slider.js

@@ -76,10 +76,12 @@ class Slider extends Component {
 
     render() {
         const thumbStartProp = this.orientation === 'horizontal' ? 'left' : 'bottom';
+        const trackBeforeSizeProp = this.orientation === 'horizontal' ? 'width' : 'height';
         const thumbStart = Math.min((this.props.value - this.props.minimumValue) / (this.props.maximumValue - this.props.minimumValue), 1);
         return (
             <div className={classnames(styles['slider-container'], styles[this.orientation], this.props.className)} onMouseDown={this.onStartSliding}>
                 <div className={styles['track']} />
+                <div className={styles['track-before']} style={{ [trackBeforeSizeProp]: `calc(100% * ${thumbStart})` }} />
                 <div className={styles['thumb']} style={{ [thumbStartProp]: `calc(100% * ${thumbStart})` }} />
             </div>
         );

src/common/Slider/styles.less

@@ -10,9 +10,15 @@
         background-color: var(--track-color);
     }
 
-    .thumb {
+    .track-before {
         position: absolute;
         z-index: 2;
+        background-color: var(--track-before-color);
+    }
+
+    .thumb {
+        position: absolute;
+        z-index: 3;
         width: var(--thumb-size);
         height: var(--thumb-size);
         border-radius: 50%;
@@ -27,6 +33,12 @@
             height: var(--track-size);
         }
 
+        .track-before {
+            top: calc(50% - var(--track-size) * 0.5);
+            left: 0;
+            height: var(--track-size);
+        }
+
         .thumb {
             top: calc(50% - var(--thumb-size) * 0.5);
             transform: translateX(-50%);
@@ -41,6 +53,12 @@
             width: var(--track-size);
         }
 
+        .track-before {
+            bottom: 0;
+            left: calc(50% - var(--track-size) * 0.1);
+            width: var(--track-size);
+        }
+
         .thumb {
             left: calc(50% - var(--thumb-size) * 0.5);
             transform: translateY(50%);

src/routes/Player/ControlBar/VolumeBar/styles.less

@@ -4,19 +4,16 @@
     align-items: center;
 
     .slider {
-        --thumb-size: var(--volume-bar-thumb-size);
         --track-size: var(--volume-bar-track-size);
         --track-color: var(--color-surfacelight);
-        --thumb-color: var(--color-surfacelight);
+        --track-before-color: var(--color-primary);
         flex: 1;
         align-self: stretch;
-        margin: 0 calc(var(--volume-bar-thumb-size) * 0.5);
     }
 
     &:hover, &.active {
         .slider {
             --track-color: var(--color-surfacelighter);
-            --thumb-color: var(--color-surfacelighter);
         }
     }
 }

src/routes/Player/ControlBar/styles.less

@@ -53,7 +53,7 @@
         }
 
         .volume-bar {
-            --volume-bar-track-size: calc(var(--control-bar-button-height) * 0.06);
+            --volume-bar-track-size: calc(var(--control-bar-button-height) * 0.08);
             height: var(--control-bar-button-height);
             width: calc(var(--control-bar-button-height) * 4);