diff --git a/docs/data/base/components/slider/DiscreteSlider.js b/docs/data/base/components/slider/DiscreteSlider.js
index 15606fc9e22e18..d36615baa64dc3 100644
--- a/docs/data/base/components/slider/DiscreteSlider.js
+++ b/docs/data/base/components/slider/DiscreteSlider.js
@@ -39,6 +39,7 @@ const blue = {
   300: '#66B2FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B3',
   900: '#003A75',
 };
 
@@ -67,10 +68,6 @@ const Slider = styled(BaseSlider)(
   touch-action: none;
   -webkit-tap-highlight-color: transparent;
 
-  &:hover {
-    opacity: 1;
-  }
-
   &.${sliderClasses.disabled} { 
     pointer-events: none;
     cursor: default;
@@ -109,20 +106,26 @@ const Slider = styled(BaseSlider)(
     display: flex;
     flex-direction: column-reverse;
 
-    :hover,
-    &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
-        theme.palette.mode === 'light' ? blue[400] : blue[300],
-        0.15,
+    &:hover{
+      box-shadow: 0 0 0 4px ${alpha(
+        theme.palette.mode === 'light' ? blue[200] : blue[300],
+        0.3,
       )};
     }
+    
+    &.${sliderClasses.focusVisible} {
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
+      outline: none;
+    }
 
     &.${sliderClasses.active} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
+      box-shadow: 0 0 0 5px ${alpha(
         theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
+        0.5,
       )};
+      outline: none;
     }
+
   }
 
   & .${sliderClasses.mark} {
diff --git a/docs/data/base/components/slider/DiscreteSlider.tsx b/docs/data/base/components/slider/DiscreteSlider.tsx
index 1bfcb4fa4dddf9..91302d1e6c7f0e 100644
--- a/docs/data/base/components/slider/DiscreteSlider.tsx
+++ b/docs/data/base/components/slider/DiscreteSlider.tsx
@@ -38,6 +38,7 @@ const blue = {
   300: '#66B2FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B3',
   900: '#003A75',
 };
 
@@ -66,10 +67,6 @@ const Slider = styled(BaseSlider)(
   touch-action: none;
   -webkit-tap-highlight-color: transparent;
 
-  &:hover {
-    opacity: 1;
-  }
-
   &.${sliderClasses.disabled} { 
     pointer-events: none;
     cursor: default;
@@ -108,20 +105,26 @@ const Slider = styled(BaseSlider)(
     display: flex;
     flex-direction: column-reverse;
 
-    :hover,
-    &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
-        theme.palette.mode === 'light' ? blue[400] : blue[300],
-        0.15,
+    &:hover{
+      box-shadow: 0 0 0 4px ${alpha(
+        theme.palette.mode === 'light' ? blue[200] : blue[300],
+        0.3,
       )};
     }
+    
+    &.${sliderClasses.focusVisible} {
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
+      outline: none;
+    }
 
     &.${sliderClasses.active} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
+      box-shadow: 0 0 0 5px ${alpha(
         theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
+        0.5,
       )};
+      outline: none;
     }
+
   }
 
   & .${sliderClasses.mark} {
diff --git a/docs/data/base/components/slider/DiscreteSliderMarks.js b/docs/data/base/components/slider/DiscreteSliderMarks.js
index 7d62bb50c18db7..97325bd6f58b4b 100644
--- a/docs/data/base/components/slider/DiscreteSliderMarks.js
+++ b/docs/data/base/components/slider/DiscreteSliderMarks.js
@@ -45,6 +45,7 @@ const blue = {
   300: '#66B2FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B3',
   900: '#003A75',
 };
 
@@ -73,10 +74,6 @@ const Slider = styled(BaseSlider)(
   touch-action: none;
   -webkit-tap-highlight-color: transparent;
 
-  &:hover {
-    opacity: 1;
-  }
-
   &.${sliderClasses.disabled} { 
     pointer-events: none;
     cursor: default;
@@ -113,19 +110,24 @@ const Slider = styled(BaseSlider)(
     border: 3px solid currentColor;
     background-color: #fff;
 
-    :hover,
-    &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
-        theme.palette.mode === 'light' ? blue[400] : blue[300],
-        0.15,
+    &:hover{
+      box-shadow: 0 0 0 4px ${alpha(
+        theme.palette.mode === 'light' ? blue[200] : blue[300],
+        0.3,
       )};
     }
+    
+    &.${sliderClasses.focusVisible} {
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
+      outline: none;
+    }
 
     &.${sliderClasses.active} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
+      box-shadow: 0 0 0 5px ${alpha(
         theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
+        0.5,
       )};
+      outline: none;
     }
   }
 
diff --git a/docs/data/base/components/slider/DiscreteSliderMarks.tsx b/docs/data/base/components/slider/DiscreteSliderMarks.tsx
index fd337b0ba5ce2d..fb51d69808d1ed 100644
--- a/docs/data/base/components/slider/DiscreteSliderMarks.tsx
+++ b/docs/data/base/components/slider/DiscreteSliderMarks.tsx
@@ -45,6 +45,7 @@ const blue = {
   300: '#66B2FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B3',
   900: '#003A75',
 };
 
@@ -73,10 +74,6 @@ const Slider = styled(BaseSlider)(
   touch-action: none;
   -webkit-tap-highlight-color: transparent;
 
-  &:hover {
-    opacity: 1;
-  }
-
   &.${sliderClasses.disabled} { 
     pointer-events: none;
     cursor: default;
@@ -113,19 +110,24 @@ const Slider = styled(BaseSlider)(
     border: 3px solid currentColor;
     background-color: #fff;
 
-    :hover,
-    &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
-        theme.palette.mode === 'light' ? blue[400] : blue[300],
-        0.15,
+    &:hover{
+      box-shadow: 0 0 0 4px ${alpha(
+        theme.palette.mode === 'light' ? blue[200] : blue[300],
+        0.3,
       )};
     }
+    
+    &.${sliderClasses.focusVisible} {
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
+      outline: none;
+    }
 
     &.${sliderClasses.active} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
+      box-shadow: 0 0 0 5px ${alpha(
         theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
+        0.5,
       )};
+      outline: none;
     }
   }
 
diff --git a/docs/data/base/components/slider/DiscreteSliderValues.js b/docs/data/base/components/slider/DiscreteSliderValues.js
index 19321d2052dafa..e5e71e0edfce22 100644
--- a/docs/data/base/components/slider/DiscreteSliderValues.js
+++ b/docs/data/base/components/slider/DiscreteSliderValues.js
@@ -46,6 +46,7 @@ const blue = {
   300: '#66B2FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B3',
   900: '#003A75',
 };
 
@@ -74,10 +75,6 @@ const Slider = styled(BaseSlider)(
   touch-action: none;
   -webkit-tap-highlight-color: transparent;
 
-  &:hover {
-    opacity: 1;
-  }
-
   &.${sliderClasses.disabled} { 
     pointer-events: none;
     cursor: default;
@@ -115,17 +112,24 @@ const Slider = styled(BaseSlider)(
     border: 3px solid currentColor;
     background-color: #fff;
 
-    :hover,
+    &:hover{
+      box-shadow: 0 0 0 4px ${alpha(
+        theme.palette.mode === 'light' ? blue[200] : blue[300],
+        0.3,
+      )};
+    }
+    
     &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
       outline: none;
     }
 
     &.${sliderClasses.active} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
+      box-shadow: 0 0 0 5px ${alpha(
         theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
+        0.5,
       )};
+      outline: none;
     }
   }
 
diff --git a/docs/data/base/components/slider/DiscreteSliderValues.tsx b/docs/data/base/components/slider/DiscreteSliderValues.tsx
index 6ca02c2b908831..e48e26658f3c42 100644
--- a/docs/data/base/components/slider/DiscreteSliderValues.tsx
+++ b/docs/data/base/components/slider/DiscreteSliderValues.tsx
@@ -46,6 +46,7 @@ const blue = {
   300: '#66B2FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B3',
   900: '#003A75',
 };
 
@@ -74,10 +75,6 @@ const Slider = styled(BaseSlider)(
   touch-action: none;
   -webkit-tap-highlight-color: transparent;
 
-  &:hover {
-    opacity: 1;
-  }
-
   &.${sliderClasses.disabled} { 
     pointer-events: none;
     cursor: default;
@@ -115,17 +112,24 @@ const Slider = styled(BaseSlider)(
     border: 3px solid currentColor;
     background-color: #fff;
 
-    :hover,
+    &:hover{
+      box-shadow: 0 0 0 4px ${alpha(
+        theme.palette.mode === 'light' ? blue[200] : blue[300],
+        0.3,
+      )};
+    }
+    
     &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
       outline: none;
     }
 
     &.${sliderClasses.active} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
+      box-shadow: 0 0 0 5px ${alpha(
         theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
+        0.5,
       )};
+      outline: none;
     }
   }
 
diff --git a/docs/data/base/components/slider/LabeledValuesSlider.js b/docs/data/base/components/slider/LabeledValuesSlider.js
index de7dbd8c5dcabc..04f580c1c12261 100644
--- a/docs/data/base/components/slider/LabeledValuesSlider.js
+++ b/docs/data/base/components/slider/LabeledValuesSlider.js
@@ -30,6 +30,7 @@ const blue = {
   300: '#66B2FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B3',
   900: '#003A75',
 };
 
@@ -57,9 +58,7 @@ const Slider = styled(BaseSlider)(
   cursor: pointer;
   touch-action: none;
   -webkit-tap-highlight-color: transparent;
-  &:hover {
-    opacity: 1;
-  }
+
   &.${sliderClasses.disabled} {
     pointer-events: none;
     cursor: default;
@@ -92,9 +91,23 @@ const Slider = styled(BaseSlider)(
     outline: 0;
     border: 3px solid currentColor;
     background-color: #fff;
-    :hover,
+    &:hover{
+      box-shadow: 0 0 0 4px ${alpha(
+        theme.palette.mode === 'light' ? blue[200] : blue[300],
+        0.3,
+      )};
+    }
+    
     &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
+      outline: none;
+    }
+
+    &.${sliderClasses.active} {
+      box-shadow: 0 0 0 5px ${alpha(
+        theme.palette.mode === 'light' ? blue[200] : blue[300],
+        0.5,
+      )};
       outline: none;
     }
     & .label {
@@ -102,7 +115,7 @@ const Slider = styled(BaseSlider)(
         font-weight: 600;
         font-size: 14px;
         background: unset;
-        background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[300]};
+        background-color: ${theme.palette.mode === 'light' ? blue[600] : blue[900]};
         width: 32px;
         height: 32px;
         padding: 0px;
@@ -125,10 +138,8 @@ const Slider = styled(BaseSlider)(
         text-align: center;
     }
     &.${sliderClasses.active} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
-      )};
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[600] : blue[300]};
+      outline: none;
     }
   }
 `,
diff --git a/docs/data/base/components/slider/LabeledValuesSlider.tsx b/docs/data/base/components/slider/LabeledValuesSlider.tsx
index defb096b37e603..1b4b4dda50fb5f 100644
--- a/docs/data/base/components/slider/LabeledValuesSlider.tsx
+++ b/docs/data/base/components/slider/LabeledValuesSlider.tsx
@@ -29,6 +29,7 @@ const blue = {
   300: '#66B2FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B3',
   900: '#003A75',
 };
 
@@ -56,9 +57,7 @@ const Slider = styled(BaseSlider)(
   cursor: pointer;
   touch-action: none;
   -webkit-tap-highlight-color: transparent;
-  &:hover {
-    opacity: 1;
-  }
+
   &.${sliderClasses.disabled} {
     pointer-events: none;
     cursor: default;
@@ -91,9 +90,23 @@ const Slider = styled(BaseSlider)(
     outline: 0;
     border: 3px solid currentColor;
     background-color: #fff;
-    :hover,
+    &:hover{
+      box-shadow: 0 0 0 4px ${alpha(
+        theme.palette.mode === 'light' ? blue[200] : blue[300],
+        0.3,
+      )};
+    }
+    
     &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
+      outline: none;
+    }
+
+    &.${sliderClasses.active} {
+      box-shadow: 0 0 0 5px ${alpha(
+        theme.palette.mode === 'light' ? blue[200] : blue[300],
+        0.5,
+      )};
       outline: none;
     }
     & .label {
@@ -101,7 +114,7 @@ const Slider = styled(BaseSlider)(
         font-weight: 600;
         font-size: 14px;
         background: unset;
-        background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[300]};
+        background-color: ${theme.palette.mode === 'light' ? blue[600] : blue[900]};
         width: 32px;
         height: 32px;
         padding: 0px;
@@ -124,10 +137,8 @@ const Slider = styled(BaseSlider)(
         text-align: center;
     }
     &.${sliderClasses.active} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
-      )};
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[600] : blue[300]};
+      outline: none;
     }
   }
 `,
diff --git a/docs/data/base/components/slider/RangeSlider.js b/docs/data/base/components/slider/RangeSlider.js
index caa3191963f4ed..e1ce66c224f6a2 100644
--- a/docs/data/base/components/slider/RangeSlider.js
+++ b/docs/data/base/components/slider/RangeSlider.js
@@ -43,6 +43,7 @@ const blue = {
   300: '#66B2FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B3',
   900: '#003A75',
 };
 
@@ -71,10 +72,6 @@ const Slider = styled(BaseSlider)(
   touch-action: none;
   -webkit-tap-highlight-color: transparent;
 
-  &:hover {
-    opacity: 1;
-  }
-
   &.${sliderClasses.disabled} { 
     pointer-events: none;
     cursor: default;
@@ -111,17 +108,24 @@ const Slider = styled(BaseSlider)(
     border: 3px solid currentColor;
     background-color: #fff;
 
-    :hover,
+    &:hover{
+      box-shadow: 0 0 0 4px ${alpha(
+        theme.palette.mode === 'light' ? blue[200] : blue[300],
+        0.3,
+      )};
+    }
+    
     &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
       outline: none;
     }
 
     &.${sliderClasses.active} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
+      box-shadow: 0 0 0 5px ${alpha(
         theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
+        0.5,
       )};
+      outline: none;
     }
   }
 
diff --git a/docs/data/base/components/slider/RangeSlider.tsx b/docs/data/base/components/slider/RangeSlider.tsx
index 7b97debc984610..8e2bca0b1a4c25 100644
--- a/docs/data/base/components/slider/RangeSlider.tsx
+++ b/docs/data/base/components/slider/RangeSlider.tsx
@@ -43,6 +43,7 @@ const blue = {
   300: '#66B2FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B3',
   900: '#003A75',
 };
 
@@ -71,10 +72,6 @@ const Slider = styled(BaseSlider)(
   touch-action: none;
   -webkit-tap-highlight-color: transparent;
 
-  &:hover {
-    opacity: 1;
-  }
-
   &.${sliderClasses.disabled} { 
     pointer-events: none;
     cursor: default;
@@ -111,17 +108,24 @@ const Slider = styled(BaseSlider)(
     border: 3px solid currentColor;
     background-color: #fff;
 
-    :hover,
+    &:hover{
+      box-shadow: 0 0 0 4px ${alpha(
+        theme.palette.mode === 'light' ? blue[200] : blue[300],
+        0.3,
+      )};
+    }
+    
     &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
       outline: none;
     }
 
     &.${sliderClasses.active} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
+      box-shadow: 0 0 0 5px ${alpha(
         theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
+        0.5,
       )};
+      outline: none;
     }
   }
 
diff --git a/docs/data/base/components/slider/UnstyledSlider.js b/docs/data/base/components/slider/UnstyledSlider.js
index db0782fab2a53e..74b8118ee86180 100644
--- a/docs/data/base/components/slider/UnstyledSlider.js
+++ b/docs/data/base/components/slider/UnstyledSlider.js
@@ -18,6 +18,7 @@ const blue = {
   300: '#66B2FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B3',
   900: '#003A75',
 };
 
@@ -87,17 +88,24 @@ const Slider = styled(BaseSlider)(
     border: 3px solid currentColor;
     background-color: #fff;
 
-    :hover,
+    &:hover{
+      box-shadow: 0 0 0 4px ${alpha(
+        theme.palette.mode === 'light' ? blue[200] : blue[300],
+        0.3,
+      )};
+    }
+    
     &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
       outline: none;
     }
 
     &.${sliderClasses.active} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
+      box-shadow: 0 0 0 5px ${alpha(
         theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
+        0.5,
       )};
+      outline: none;
     }
   }
 `,
diff --git a/docs/data/base/components/slider/UnstyledSlider.tsx b/docs/data/base/components/slider/UnstyledSlider.tsx
index db0782fab2a53e..74b8118ee86180 100644
--- a/docs/data/base/components/slider/UnstyledSlider.tsx
+++ b/docs/data/base/components/slider/UnstyledSlider.tsx
@@ -18,6 +18,7 @@ const blue = {
   300: '#66B2FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B3',
   900: '#003A75',
 };
 
@@ -87,17 +88,24 @@ const Slider = styled(BaseSlider)(
     border: 3px solid currentColor;
     background-color: #fff;
 
-    :hover,
+    &:hover{
+      box-shadow: 0 0 0 4px ${alpha(
+        theme.palette.mode === 'light' ? blue[200] : blue[300],
+        0.3,
+      )};
+    }
+    
     &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
       outline: none;
     }
 
     &.${sliderClasses.active} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
+      box-shadow: 0 0 0 5px ${alpha(
         theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
+        0.5,
       )};
+      outline: none;
     }
   }
 `,
diff --git a/docs/data/base/components/slider/UnstyledSliderBasic/system/index.js b/docs/data/base/components/slider/UnstyledSliderBasic/system/index.js
index 56473b2e213677..b7bed900ed44c6 100644
--- a/docs/data/base/components/slider/UnstyledSliderBasic/system/index.js
+++ b/docs/data/base/components/slider/UnstyledSliderBasic/system/index.js
@@ -18,6 +18,7 @@ const blue = {
   300: '#66B2FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B3',
   900: '#003A75',
 };
 
@@ -46,10 +47,6 @@ const Slider = styled(BaseSlider)(
   touch-action: none;
   -webkit-tap-highlight-color: transparent;
 
-  &:hover {
-    opacity: 1;
-  }
-
   &.${sliderClasses.disabled} { 
     pointer-events: none;
     cursor: default;
@@ -87,19 +84,21 @@ const Slider = styled(BaseSlider)(
     border: 3px solid currentColor;
     background-color: #fff;
 
-    :hover,
-    &.${sliderClasses.focusVisible} {
+    &:hover{
       box-shadow: 0 0 0 0.25rem ${alpha(
-        theme.palette.mode === 'light' ? blue[400] : blue[300],
-        0.15,
+        theme.palette.mode === 'light' ? blue[200] : blue[300],
+        0.3,
       )};
     }
 
+    &.${sliderClasses.focusVisible} {
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
+      outline: none;
+    }
+
     &.${sliderClasses.active} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
-      )};
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[600] : blue[300]};
+      outline: none;
     }
   }
 `,
diff --git a/docs/data/base/components/slider/UnstyledSliderBasic/system/index.tsx b/docs/data/base/components/slider/UnstyledSliderBasic/system/index.tsx
index 56473b2e213677..b7bed900ed44c6 100644
--- a/docs/data/base/components/slider/UnstyledSliderBasic/system/index.tsx
+++ b/docs/data/base/components/slider/UnstyledSliderBasic/system/index.tsx
@@ -18,6 +18,7 @@ const blue = {
   300: '#66B2FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B3',
   900: '#003A75',
 };
 
@@ -46,10 +47,6 @@ const Slider = styled(BaseSlider)(
   touch-action: none;
   -webkit-tap-highlight-color: transparent;
 
-  &:hover {
-    opacity: 1;
-  }
-
   &.${sliderClasses.disabled} { 
     pointer-events: none;
     cursor: default;
@@ -87,19 +84,21 @@ const Slider = styled(BaseSlider)(
     border: 3px solid currentColor;
     background-color: #fff;
 
-    :hover,
-    &.${sliderClasses.focusVisible} {
+    &:hover{
       box-shadow: 0 0 0 0.25rem ${alpha(
-        theme.palette.mode === 'light' ? blue[400] : blue[300],
-        0.15,
+        theme.palette.mode === 'light' ? blue[200] : blue[300],
+        0.3,
       )};
     }
 
+    &.${sliderClasses.focusVisible} {
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
+      outline: none;
+    }
+
     &.${sliderClasses.active} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
-        theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
-      )};
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[600] : blue[300]};
+      outline: none;
     }
   }
 `,
diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.js b/docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.js
index aff41415934fc8..0bc9bad1fb1099 100644
--- a/docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.js
+++ b/docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.js
@@ -10,7 +10,7 @@ export default function UnstyledSliderIntroduction() {
           root: { className: 'CustomSlider' },
           rail: { className: 'CustomSlider-rail' },
           track: { className: 'CustomSlider-track' },
-          thumb: { className: 'CustomSlider-thumb' },
+          thumb: { className: 'CustomSlider-thumb', tabIndex: 0 },
         }}
         defaultValue={50}
       />
@@ -86,6 +86,7 @@ function Styles() {
       cursor: default;
       color: ${isDarkMode ? grey[600] : grey[300]};
       opacity: 0.5;
+      outline: none;
     }
 
     .CustomSlider-rail {
@@ -120,16 +121,16 @@ function Styles() {
     }
 
     .CustomSlider-thumb:hover {
-      box-shadow: 0 0 0 0.25rem ${alpha(isDarkMode ? cyan[300] : cyan[400], 0.15)};
+      box-shadow: 0 0 0 0.25rem ${alpha(isDarkMode ? cyan[300] : cyan[200], 0.5)};
     }
 
     .CustomSlider-thumb:focus-visible {
-      box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
-      outline: none;
+      box-shadow: 0 0 0 4px ${isDarkMode ? cyan[700] : cyan[200]};
+      
     }
 
     .CustomSlider-thumb.${sliderClasses.active} {
-      box-shadow: 0 0 0 0.25rem ${alpha(isDarkMode ? cyan[300] : cyan[200], 0.3)};
+      box-shadow: 0 0 0 4px ${isDarkMode ? cyan[600] : cyan[300]};
     }
     `}</style>
   );
diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.tsx b/docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.tsx
index aff41415934fc8..0bc9bad1fb1099 100644
--- a/docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.tsx
+++ b/docs/data/base/components/slider/UnstyledSliderIntroduction/css/index.tsx
@@ -10,7 +10,7 @@ export default function UnstyledSliderIntroduction() {
           root: { className: 'CustomSlider' },
           rail: { className: 'CustomSlider-rail' },
           track: { className: 'CustomSlider-track' },
-          thumb: { className: 'CustomSlider-thumb' },
+          thumb: { className: 'CustomSlider-thumb', tabIndex: 0 },
         }}
         defaultValue={50}
       />
@@ -86,6 +86,7 @@ function Styles() {
       cursor: default;
       color: ${isDarkMode ? grey[600] : grey[300]};
       opacity: 0.5;
+      outline: none;
     }
 
     .CustomSlider-rail {
@@ -120,16 +121,16 @@ function Styles() {
     }
 
     .CustomSlider-thumb:hover {
-      box-shadow: 0 0 0 0.25rem ${alpha(isDarkMode ? cyan[300] : cyan[400], 0.15)};
+      box-shadow: 0 0 0 0.25rem ${alpha(isDarkMode ? cyan[300] : cyan[200], 0.5)};
     }
 
     .CustomSlider-thumb:focus-visible {
-      box-shadow: 0 0 0 4px ${isDarkMode ? cyan[300] : cyan[200]};
-      outline: none;
+      box-shadow: 0 0 0 4px ${isDarkMode ? cyan[700] : cyan[200]};
+      
     }
 
     .CustomSlider-thumb.${sliderClasses.active} {
-      box-shadow: 0 0 0 0.25rem ${alpha(isDarkMode ? cyan[300] : cyan[200], 0.3)};
+      box-shadow: 0 0 0 4px ${isDarkMode ? cyan[600] : cyan[300]};
     }
     `}</style>
   );
diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.js b/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.js
index eddff408508c9e..5583e5ece2d51d 100644
--- a/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.js
+++ b/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.js
@@ -18,6 +18,7 @@ const blue = {
   300: '#66B2FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B3',
   900: '#003A75',
 };
 
@@ -46,10 +47,6 @@ const Slider = styled(BaseSlider)(
   touch-action: none;
   -webkit-tap-highlight-color: transparent;
 
-  &:hover {
-    opacity: 1;
-  }
-
   &.${sliderClasses.disabled} { 
     pointer-events: none;
     cursor: default;
@@ -87,17 +84,24 @@ const Slider = styled(BaseSlider)(
     border: 3px solid currentColor;
     background-color: #fff;
 
-    :hover,
+    &:hover{
+      box-shadow: 0 0 0 4px ${alpha(
+        theme.palette.mode === 'light' ? blue[200] : blue[300],
+        0.3,
+      )};
+    }
+
     &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
       outline: none;
     }
 
     &.${sliderClasses.active} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
+      box-shadow: 0 0 0 5px ${alpha(
         theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
+        0.5,
       )};
+      outline: none;
     }
   }
 `,
diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.tsx b/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.tsx
index eddff408508c9e..5583e5ece2d51d 100644
--- a/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.tsx
+++ b/docs/data/base/components/slider/UnstyledSliderIntroduction/system/index.tsx
@@ -18,6 +18,7 @@ const blue = {
   300: '#66B2FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B3',
   900: '#003A75',
 };
 
@@ -46,10 +47,6 @@ const Slider = styled(BaseSlider)(
   touch-action: none;
   -webkit-tap-highlight-color: transparent;
 
-  &:hover {
-    opacity: 1;
-  }
-
   &.${sliderClasses.disabled} { 
     pointer-events: none;
     cursor: default;
@@ -87,17 +84,24 @@ const Slider = styled(BaseSlider)(
     border: 3px solid currentColor;
     background-color: #fff;
 
-    :hover,
+    &:hover{
+      box-shadow: 0 0 0 4px ${alpha(
+        theme.palette.mode === 'light' ? blue[200] : blue[300],
+        0.3,
+      )};
+    }
+
     &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
       outline: none;
     }
 
     &.${sliderClasses.active} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
+      box-shadow: 0 0 0 5px ${alpha(
         theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
+        0.5,
       )};
+      outline: none;
     }
   }
 `,
diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.js b/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.js
index 74a355eff241db..02b578ac24ae34 100644
--- a/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.js
+++ b/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.js
@@ -84,7 +84,7 @@ const Slider = React.forwardRef((props, ref) => {
             className: clsx(
               `absolute w-4 h-4 -ml-1.5 -mt-1.5 box-border rounded-full outline-0 border-[3px] border-solid border-current bg-white hover:shadow-outline-purple ${
                 focused || active
-                  ? 'shadow-[0_0_0_4px_#ddd6fe] dark:shadow-[0_0_0_4px_#a78bfa] outline-none'
+                  ? 'shadow-[0_0_0_4px_#e9d5ff] dark:shadow-[0_0_0_4px_#7e22ce] active:shadow-[0_0_0_4px_#d8b4fe] dark:active:shadow-[0_0_0_4px_#9333ea] outline-none'
                   : ''
               }`,
               resolvedSlotProps?.className,
diff --git a/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx b/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx
index 919d97ace5f573..c8ceb29a879e24 100644
--- a/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx
+++ b/docs/data/base/components/slider/UnstyledSliderIntroduction/tailwind/index.tsx
@@ -84,7 +84,7 @@ const Slider = React.forwardRef<HTMLSpanElement, SliderProps>((props, ref) => {
             className: clsx(
               `absolute w-4 h-4 -ml-1.5 -mt-1.5 box-border rounded-full outline-0 border-[3px] border-solid border-current bg-white hover:shadow-outline-purple ${
                 focused || active
-                  ? 'shadow-[0_0_0_4px_#ddd6fe] dark:shadow-[0_0_0_4px_#a78bfa] outline-none'
+                  ? 'shadow-[0_0_0_4px_#e9d5ff] dark:shadow-[0_0_0_4px_#7e22ce] active:shadow-[0_0_0_4px_#d8b4fe] dark:active:shadow-[0_0_0_4px_#9333ea] outline-none'
                   : ''
               }`,
               resolvedSlotProps?.className,
diff --git a/docs/data/base/components/slider/VerticalSlider.js b/docs/data/base/components/slider/VerticalSlider.js
index a9749ec3321d32..8226aa6b179bb1 100644
--- a/docs/data/base/components/slider/VerticalSlider.js
+++ b/docs/data/base/components/slider/VerticalSlider.js
@@ -17,6 +17,7 @@ const blue = {
   300: '#66B2FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B3',
   900: '#003A75',
 };
 
@@ -31,10 +32,7 @@ const Slider = styled(BaseSlider)(
   cursor: pointer;
   touch-action: none;
   -webkit-tap-highlight-color: transparent;
-  opacity: 0.75;
-  &:hover {
-    opacity: 1;
-  }
+
 
   & .${sliderClasses.rail} {
     display: block;
@@ -43,7 +41,7 @@ const Slider = styled(BaseSlider)(
     width: inherit;
     border-radius: 2px;
     background-color: currentColor;
-    opacity: 0.38;
+    opacity: 0.4;
   }
 
   & .${sliderClasses.track} {
@@ -69,17 +67,24 @@ const Slider = styled(BaseSlider)(
     -ms-transform: translate(-50%, 50%);
     transform: translate(-50%, 50%);
 
-    :hover,
+    &:hover{
+      box-shadow: 0 0 0 4px ${alpha(
+        theme.palette.mode === 'light' ? blue[200] : blue[300],
+        0.3,
+      )};
+    }
+    
     &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
       outline: none;
     }
 
     &.${sliderClasses.active} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
+      box-shadow: 0 0 0 5px ${alpha(
         theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
+        0.5,
       )};
+      outline: none;
     }
   }
 `,
diff --git a/docs/data/base/components/slider/VerticalSlider.tsx b/docs/data/base/components/slider/VerticalSlider.tsx
index a9749ec3321d32..8226aa6b179bb1 100644
--- a/docs/data/base/components/slider/VerticalSlider.tsx
+++ b/docs/data/base/components/slider/VerticalSlider.tsx
@@ -17,6 +17,7 @@ const blue = {
   300: '#66B2FF',
   500: '#007FFF',
   600: '#0072E5',
+  700: '#0059B3',
   900: '#003A75',
 };
 
@@ -31,10 +32,7 @@ const Slider = styled(BaseSlider)(
   cursor: pointer;
   touch-action: none;
   -webkit-tap-highlight-color: transparent;
-  opacity: 0.75;
-  &:hover {
-    opacity: 1;
-  }
+
 
   & .${sliderClasses.rail} {
     display: block;
@@ -43,7 +41,7 @@ const Slider = styled(BaseSlider)(
     width: inherit;
     border-radius: 2px;
     background-color: currentColor;
-    opacity: 0.38;
+    opacity: 0.4;
   }
 
   & .${sliderClasses.track} {
@@ -69,17 +67,24 @@ const Slider = styled(BaseSlider)(
     -ms-transform: translate(-50%, 50%);
     transform: translate(-50%, 50%);
 
-    :hover,
+    &:hover{
+      box-shadow: 0 0 0 4px ${alpha(
+        theme.palette.mode === 'light' ? blue[200] : blue[300],
+        0.3,
+      )};
+    }
+    
     &.${sliderClasses.focusVisible} {
-      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[300] : blue[200]};
+      box-shadow: 0 0 0 4px ${theme.palette.mode === 'dark' ? blue[700] : blue[200]};
       outline: none;
     }
 
     &.${sliderClasses.active} {
-      box-shadow: 0 0 0 0.25rem ${alpha(
+      box-shadow: 0 0 0 5px ${alpha(
         theme.palette.mode === 'light' ? blue[200] : blue[300],
-        0.3,
+        0.5,
       )};
+      outline: none;
     }
   }
 `,