diff --git a/react/src/lib/components/Layout/Slider/slider.css b/react/src/lib/components/Layout/Slider/slider.css
index cb15834d..d142fa57 100644
--- a/react/src/lib/components/Layout/Slider/slider.css
+++ b/react/src/lib/components/Layout/Slider/slider.css
@@ -1,26 +1,30 @@
 /* !Important is needed to take precedence of the .rc-slider classes */
 
+.webviz-slider .rc-slider-rail {
+    background-color: rgb(190, 190, 190);
+}
+
 .webviz-slider .rc-slider-track {
-    background-color: var(--menuLinkColor) !important;
-  }
-  
-  .webviz-slider .rc-slider-dot-active {  
+    background-color: var(--menuLinkHoverColor) !important;
+}
+
+.webviz-slider .rc-slider-dot-active {
     border-color: var(--menuLinkHoverColor) !important;
     border-color: var(--menuLinkHoverColor) !important;
-  }
-  
-  .webviz-slider .rc-slider-handle {
+}
+
+.webviz-slider .rc-slider-handle {
     background-color: var(--menuLinkHoverColor) !important;
     border-color: var(--menuLinkHoverColor) !important;
-  }
-  
-  .webviz-slider .rc-slider-handle-active:active {
+}
+
+.webviz-slider .rc-slider-handle-active:active {
     border-color: var(--menuLinkHoverColor) !important;
-    box-shadow: 0 0 5px  var(--menuLinkHoverColor) !important;
-  }
-  
-  .webviz-slider .rc-slider-dot {
-    margin-left:-10px !important;
+    box-shadow: 0 0 5px var(--menuLinkHoverColor) !important;
+}
+
+.webviz-slider .rc-slider-dot {
+    margin-left: -10px !important;
     background-color: var(--menuBackground) !important;
     border-color: var(--menuLinkHoverColor) !important;
-  }
+}