diff --git a/gnome-shell/_common.scss b/gnome-shell/_common.scss
index 8942b73..58c116d 100644
--- a/gnome-shell/_common.scss
+++ b/gnome-shell/_common.scss
@@ -111,29 +111,26 @@ StScrollBar {
 
 /* Slider */
 
-.slider {
-  height: 1em;
-  color: $selected_fg_color;
-  border-color: black;
-  -slider-height: 0.3em;
-  -slider-background-color: $gray; //background of the trough
-  -slider-border-color: black; //trough border color
-  -slider-active-background-color: $selected_bg_color; //active trough fill
-  -slider-active-border-color: $lime; //active trough border
-  -slider-border-width: 0;
-  -slider-handle-radius: 6px;
-  -slider-handle-border-color: transparent;
+$slider_size: 16px;
 
-  -barlevel-height: 0.3em;
-  -barlevel-background-color: $gray;
-  -barlevel-border-color: black;
+.slider {
+  color: $fg_color;
+  // slider trough
+  -barlevel-height: 3px;
+  -barlevel-background-color: transparentize($fg_color, 0.6); //background of the trough
+  -barlevel-border-width: 2px; 
+  -barlevel-border-color: transparent; // trough border color
+  // fill style
   -barlevel-active-background-color: $selected_bg_color;
-  -barlevel-active-border-color: $lime;
-  -barlevel-border-width: 0;
-  -barlevel-handle-radius: 6px; 
-  -barlevel-overdrive-color: $selected_bg_color;
-  -barlevel-overdrive-border-color: transparent;
+  -barlevel-active-border-color: transparent;
+  // overfill style (red in this case)
+  -barlevel-overdrive-color: $destructive_color;
+  -barlevel-overdrive-border-color: transparent; //trough border when red;
   -barlevel-overdrive-separator-width: 0px;
+  // slider handler
+  -slider-handle-radius: $slider_size * 0.5; // half the size of the size
+  -slider-handle-border-width: 0;
+  -slider-handle-border-color: transparent; // because 0 width
 }
 
 /* Check Boxes */
diff --git a/gnome-shell/gnome-shell.css b/gnome-shell/gnome-shell.css
index 1336995..1abc8b2 100644
--- a/gnome-shell/gnome-shell.css
+++ b/gnome-shell/gnome-shell.css
@@ -143,27 +143,19 @@ StScrollBar {
 
 /* Slider */
 .slider {
-  height: 1em;
-  color: #fefefe;
-  border-color: black;
-  -slider-height: 0.3em;
-  -slider-background-color: #4e586d;
-  -slider-border-color: black;
-  -slider-active-background-color: #81a1c1;
-  -slider-active-border-color: #a3be8c;
-  -slider-border-width: 0;
-  -slider-handle-radius: 6px;
-  -slider-handle-border-color: transparent;
-  -barlevel-height: 0.3em;
-  -barlevel-background-color: #4e586d;
-  -barlevel-border-color: black;
+  color: #d8dee9;
+  -barlevel-height: 3px;
+  -barlevel-background-color: rgba(216, 222, 233, 0.4);
+  -barlevel-border-width: 2px;
+  -barlevel-border-color: transparent;
   -barlevel-active-background-color: #81a1c1;
-  -barlevel-active-border-color: #a3be8c;
-  -barlevel-border-width: 0;
-  -barlevel-handle-radius: 6px;
-  -barlevel-overdrive-color: #81a1c1;
+  -barlevel-active-border-color: transparent;
+  -barlevel-overdrive-color: #9b1b32;
   -barlevel-overdrive-border-color: transparent;
-  -barlevel-overdrive-separator-width: 0px; }
+  -barlevel-overdrive-separator-width: 0px;
+  -slider-handle-radius: 8px;
+  -slider-handle-border-width: 0;
+  -slider-handle-border-color: transparent; }
 
 /* Check Boxes */
 .check-box StBoxLayout {