💄 Improve accessibility and visual coherence of RangeSlider

Author: Frontendland

src/components/RangeSlider/RangeSlider.astro

@@ -138,11 +138,8 @@ const labelStyle = updateLabels ? `min-width:${minLabelWidth};` : null
     }
 
     const updateRange = ({ range, minValue, maxValue, min, max }: RangeParams) => {
-        const minAdjust = minValue > (max / 2) ? -1 : 1
-        const maxAdjust = maxValue < (max / 2) ? 1 : -1
-
-        range.style.left = `${interpolate(minValue + minAdjust, [min, max], [0, 100])}%`
-        range.style.right = `${interpolate(maxValue + maxAdjust, [min, max], [100, 0])}%`
+        range.style.left = `${interpolate(minValue, [min, max], [0, 100])}%`
+        range.style.right = `${interpolate(maxValue, [min, max], [100, 0])}%`
     }
 
     const updateLabels = (wrapper: HTMLDivElement, minValue: number, maxValue: number) => {

src/components/RangeSlider/RangeSlider.svelte

@@ -45,10 +45,8 @@
     let dynamicMinLabel = $state(minLabel)
     let dynamicMaxLabel = $state(maxLabel)
 
-    const minAdjust = $derived(minValue > (max / 2) ? -1 : 1)
-    const maxAdjust = $derived(maxValue < (max / 2) ? 1 : -1)
-    const rangeLeftPercent = $derived(interpolate((minValue || min) + minAdjust, [min, max], [0, 100]))
-    const rangeRightPercent = $derived(interpolate((maxValue || max) + maxAdjust, [min, max], [100, 0]))
+    const rangeLeftPercent = $derived(interpolate((minValue || min), [min, max], [0, 100]))
+    const rangeRightPercent = $derived(interpolate((maxValue || max), [min, max], [100, 0]))
 
     const updateDynamicLabels = (minValue: number, maxValue: number) => {
         if (dynamicMinLabel && dynamicMaxLabel) {

src/components/RangeSlider/RangeSlider.tsx

@@ -116,11 +116,8 @@ const RangeSlider = ({
     }
 
     useEffect(() => {
-        const minAdjust = minValue > (max / 2) ? -1 : 1
-        const maxAdjust = maxValue < (max / 2) ? 1 : -1
-
-        rangeLeftPercent.current = interpolate((minValue || min) + minAdjust, [min, max], [0, 100])
-        rangeRightPercent.current = interpolate((maxValue || max) + maxAdjust, [min, max], [100, 0])
+        rangeLeftPercent.current = interpolate((minValue || min), [min, max], [0, 100])
+        rangeRightPercent.current = interpolate((maxValue || max), [min, max], [100, 0])
     }, [minValue, maxValue])
 
     return (

src/components/RangeSlider/rangeslider.module.scss

@@ -43,6 +43,7 @@ body {
     @include position(absolute);
     @include background(var(--w-range-slider-color));
     @include size('h100%');
+    @include border-radius();
 
     &[data-disabled] {
         @include background(primary-30);
@@ -60,6 +61,18 @@ body {
     appearance: none;
     pointer-events: none;
 
+    &:focus-visible {
+        outline: none;
+
+        &::-webkit-slider-thumb {
+            @include border(info);
+        }
+
+        &::-moz-range-thumb {
+            @include border(info);
+        }
+    }
+
     &[disabled]::-webkit-slider-thumb {
         @include background(primary-50);
         @include border(primary-30);
@@ -71,6 +84,39 @@ body {
         @include border(primary-30);
         cursor: no-drop;
     }
+
+    &[data-min]::-webkit-slider-thumb  {
+        box-shadow: 3px 0 0 3px var(--w-range-slider-color);
+    }
+
+    &[data-max]::-webkit-slider-thumb  {
+        box-shadow: -3px 0 0 3px var(--w-range-slider-color);
+    }
+
+    &[data-min]::-moz-range-thumb   {
+        box-shadow: 3px 0 0 3px var(--w-range-slider-color);
+    }
+
+    &[data-max]::-moz-range-thumb   {
+        box-shadow: -3px 0 0 3px var(--w-range-slider-color);
+    }
+
+    
+    &[disabled][data-min]::-webkit-slider-thumb  {
+        box-shadow: 3px 0 0 3px var(--w-color-primary-30);
+    }
+
+    &[disabled][data-max]::-webkit-slider-thumb  {
+        box-shadow: -3px 0 0 3px var(--w-color-primary-30);
+    }
+
+    &[disabled][data-min]::-moz-range-thumb   {
+        box-shadow: 3px 0 0 3px var(--w-color-primary-30);
+    }
+
+    &[disabled][data-max]::-moz-range-thumb   {
+        box-shadow: -3px 0 0 3px var(--w-color-primary-30);
+    }
 }
 
 .input::-webkit-slider-thumb {