💄 Improve RangeSlider visuals

Author: Frontendland

src/components/RangeSlider/RangeSlider.astro

@@ -138,8 +138,11 @@ const labelStyle = updateLabels ? `min-width:${minLabelWidth};` : null
     }
 
     const updateRange = ({ range, minValue, maxValue, min, max }: RangeParams) => {
-        range.style.left = `${interpolate(minValue, [min, max], [0, 100])}%`
-        range.style.right = `${interpolate(maxValue, [min, max], [100, 0])}%`
+        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])}%`
     }
 
     const updateLabels = (wrapper: HTMLDivElement, minValue: number, maxValue: number) => {
@@ -172,22 +175,18 @@ const labelStyle = updateLabels ? `min-width:${minLabelWidth};` : null
             const value = Number(target.value)
             const min = Number(target.min)
             const max = Number(target.max)
+            const step = Number(target.step)
             const gap = Number(wrapper.dataset.gap)
             const shouldUpdateLabels = !!wrapper.dataset.updateLabels
             const prevInputValue = prevInput instanceof HTMLInputElement ? prevInput.value : 0
             const nextInputValue = nextInput instanceof HTMLInputElement ? nextInput.value : 0
             const minValue = target.dataset.min ? value : Number(prevInputValue)
             const maxValue = target.dataset.max ? value : Number(nextInputValue)
 
-            if (maxValue - minValue >= gap) {
-                updateRange({
-                    range,
-                    minValue,
-                    maxValue,
-                    min,
-                    max
-                })
+            let currentMin = minValue
+            let currentMax = maxValue
 
+            if (maxValue - minValue >= gap) {
                 if (shouldUpdateLabels) {
                     updateLabels(wrapper, minValue, maxValue)
                 }
@@ -197,10 +196,20 @@ const labelStyle = updateLabels ? `min-width:${minLabelWidth};` : null
                     max: maxValue
                 })
             } else if (target.dataset.min) {
-                target.value = String(maxValue - gap)
+                currentMin = maxValue - Math.max(step, gap)
+                target.value = String(currentMin)
             } else {
-                target.value = String(minValue + gap)
+                currentMax = minValue + Math.max(step, gap)
+                target.value = String(currentMax)
             }
+
+            updateRange({
+                range,
+                minValue: currentMin,
+                maxValue: currentMax,
+                min,
+                max
+            })
         }, true)
 
         on('[data-id="w-range-slider"] button', 'click', (event: Event) => {

src/components/RangeSlider/RangeSlider.svelte

@@ -45,8 +45,10 @@
     let dynamicMinLabel = $state(minLabel)
     let dynamicMaxLabel = $state(maxLabel)
 
-    const rangeLeftPercent = $derived(interpolate(minValue || min, [min, max], [0, 100]))
-    const rangeRightPercent = $derived(interpolate(maxValue || max, [min, max], [100, 0]))
+    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 updateDynamicLabels = (minValue: number, maxValue: number) => {
         if (dynamicMinLabel && dynamicMaxLabel) {
@@ -72,9 +74,11 @@
                 max: maxValue
             })
         } else if (target.dataset.min) {
-            target.value = String(maxValue - minGap)
+            minValue = maxValue - Math.max(step, minGap)
+            target.value = String(minValue)
         } else {
-            target.value = String(minValue + minGap)
+            maxValue = minValue + Math.max(step, minGap)
+            target.value = String(maxValue)
         }
     }
 

src/components/RangeSlider/RangeSlider.tsx

@@ -63,25 +63,28 @@ const RangeSlider = ({
 
         const value = Number(target.value)
 
-        if (target.dataset.min) {
-            if (value <= maxValue - minGap) {
-                setMinValue(value)
-            }
-        } else if (value >= minValue + minGap) {
-            setMaxValue(value)
-        }
+        let currentMin = target.dataset.min ? value : minValue
+        let currentMax = target.dataset.max ? value : maxValue
 
-        const newMin = target.dataset.min ? value : minValue
-        const newMax = target.dataset.max ? value : maxValue
+        if (currentMax - currentMin >= minGap) {
+            if (updateLabels) {
+                updateDynamicLabels(currentMin, currentMax)
+            }
 
-        if (updateLabels) {
-            updateDynamicLabels(newMin, newMax)
+            onChange?.({
+                min: currentMin,
+                max: currentMax
+            })
+        } else if (target.dataset.min) {
+            currentMin = currentMax - Math.max(step, minGap)
+            target.value = String(currentMin)
+        } else {
+            currentMax = currentMin + Math.max(step, minGap)
+            target.value = String(currentMax)
         }
 
-        onChange?.({
-            min: newMin,
-            max: newMax
-        })
+        setMinValue(currentMin)
+        setMaxValue(currentMax)
     }
 
     const handleClick = (event: React.MouseEvent, direction: 'left' | 'right') => {
@@ -113,8 +116,11 @@ const RangeSlider = ({
     }
 
     useEffect(() => {
-        rangeLeftPercent.current = interpolate(minValue || min, [min, max], [0, 100])
-        rangeRightPercent.current = interpolate(maxValue || max, [min, max], [100, 0])
+        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])
     }, [minValue, maxValue])
 
     return (

src/components/RangeSlider/rangeslider.module.scss

@@ -34,6 +34,7 @@ body {
     @include border-radius(xl);
     @include size(h10px);
     @include background(var(--w-range-slider-background));
+    @include visibility(hidden);
 
     flex: 1;
 }
@@ -42,7 +43,6 @@ body {
     @include position(absolute);
     @include background(var(--w-range-slider-color));
     @include size('h100%');
-    @include border-radius(xl);
 
     &[data-disabled] {
         @include background(primary-30);