diff --git a/src/Components/Inputs/Composed/RangeSlider.scss b/src/Components/Inputs/Composed/RangeSlider.scss
index d247a417..4b0d0b71 100644
--- a/src/Components/Inputs/Composed/RangeSlider.scss
+++ b/src/Components/Inputs/Composed/RangeSlider.scss
@@ -28,9 +28,9 @@ $slider-hover: $g17-whisper;
     background: $slider-hover-border;
   }
 
-  &:focus {
-    outline: none;
-  }
+  // &:focus {
+  //   outline: none;
+  // }
 
   &::-webkit-slider-runnable-track {
     height: $slider-track-height;
@@ -51,10 +51,15 @@ $slider-hover: $g17-whisper;
     border-radius: $cf-radius;
     background: $slider-handle;
     margin-top: -(($slider-handle-height*0.5) - ($slider-track-height*0.5));
-
-    &:hover,
+    cursor:pointer;
+    box-shadow: 0 0 0 0 rgba($g7-graphite,.3);
+    transition: box-shadow .05s ease;
+    &:active{
+      box-shadow: 0 0 0 20px rgba($g7-graphite,.35);
+    }
     &:focus {
       background: $slider-handle-focus;
+      box-shadow: 0 0 0 10px rgba($g7-graphite,.25);
     }
   }
 
@@ -71,10 +76,16 @@ $slider-hover: $g17-whisper;
     width: $slider-handle-height;
     border-radius: $cf-radius;
     background: $slider-handle;
-
+    cursor:pointer;
+    box-shadow: 0 0 0 0 rgba($g7-graphite,.3);
+    transition: box-shadow .05s ease;
+    &:active{
+      box-shadow: 0 0 0 20px rgba($g7-graphite,.35);
+    }
     &:hover,
     &:focus {
       background: $slider-handle-focus;
+      box-shadow: 0 0 0 10px rgba($g7-graphite,.25);
     }
   }
 
@@ -100,10 +111,16 @@ $slider-hover: $g17-whisper;
     width: $slider-handle-height;
     border-radius: $cf-radius;
     background: $slider-handle;
-
+    cursor:pointer;
+    box-shadow: 0 0 0 0 rgba($g7-graphite,.3);
+    transition: box-shadow .05s ease;
+    &:active{
+      box-shadow: 0 0 0 20px rgba($g7-graphite,.35);
+    }
     &:hover,
     &:focus {
       background: $slider-handle-focus;
+      box-shadow: 0 0 0 10px rgba($g7-graphite,.25);
     }
   }
 }
diff --git a/src/Components/Inputs/Composed/RangeSlider.tsx b/src/Components/Inputs/Composed/RangeSlider.tsx
index f6980563..a895a341 100644
--- a/src/Components/Inputs/Composed/RangeSlider.tsx
+++ b/src/Components/Inputs/Composed/RangeSlider.tsx
@@ -47,6 +47,8 @@ export interface RangeSliderProps extends StandardFunctionProps {
   color?: ComponentColor
   /** Fill the track before the handle to indicate percentage */
   fill?: boolean
+  /** Add a subtle gradient effect */
+  gradient?: boolean
   /** Displays the min and max values below the slider */
   hideLabels?: boolean
   /** Adds a prefix to labels */
@@ -68,6 +70,7 @@ export const RangeSlider = forwardRef<RangeSliderRef, RangeSliderProps>(
       min = 0,
       max = 100,
       fill = false,
+      gradient= true,
       size = ComponentSize.Small,
       step,
       style,
@@ -109,6 +112,7 @@ export const RangeSlider = forwardRef<RangeSliderRef, RangeSliderProps>(
 
     const inputStyle = generateRangeSliderTrackFillStyle(
       fill,
+      gradient,
       min,
       max,
       value,
diff --git a/src/Components/Inputs/Documentation/Inputs.stories.tsx b/src/Components/Inputs/Documentation/Inputs.stories.tsx
index 4f8d6516..f6605666 100644
--- a/src/Components/Inputs/Documentation/Inputs.stories.tsx
+++ b/src/Components/Inputs/Documentation/Inputs.stories.tsx
@@ -943,6 +943,7 @@ inputsComposedStories.add(
           labelPrefix={text('labelPrefix', '')}
           labelSuffix={text('labelSuffix', '')}
           fill={boolean('fill', true)}
+          gradient={boolean('gradient', true)}
           hideLabels={boolean('hide labels', false)}
           style={object('style', exampleRangeSliderStyle)}
           status={
diff --git a/src/Components/Inputs/Input.tsx b/src/Components/Inputs/Input.tsx
index 28ebb592..33569825 100644
--- a/src/Components/Inputs/Input.tsx
+++ b/src/Components/Inputs/Input.tsx
@@ -244,6 +244,7 @@ export const Input = forwardRef<InputRef, InputProps>(
           style={inputStyle}
           required={required}
           pattern={pattern}
+          aria-label={testID}
         />
         {clearElement}
         {type === InputType.Checkbox && <div className={inputCheckboxClass} />}
diff --git a/src/Utils/index.ts b/src/Utils/index.ts
index e8bef3b3..7655e913 100644
--- a/src/Utils/index.ts
+++ b/src/Utils/index.ts
@@ -158,6 +158,7 @@ export const generateTechnoSpinnerStyle = (
 
 export const generateRangeSliderTrackFillStyle = (
   fill: boolean,
+  gradient: boolean,
   min: number,
   max: number,
   value: number,
@@ -182,9 +183,11 @@ export const generateRangeSliderTrackFillStyle = (
 
   const pos = ((value - minVal) / (maxVal - minVal)) * 100
 
+  const fillColorModified = gradient ? chroma(fillColor[color]).darken(2).saturate(2).hex() : fillColor[color]
+
   if (fill) {
     return {
-      background: `linear-gradient(to right, ${fillColor[color]} 0%, ${fillColor[color]} ${pos}%, ${InfluxColors.Pepper} ${pos}%, ${InfluxColors.Pepper} 100%)`,
+      background: `linear-gradient(to right, ${fillColorModified} 0%, ${fillColor[color]} ${pos}%, ${InfluxColors.Pepper} ${pos}%, ${InfluxColors.Pepper} 100%)`,
     }
   }