Fix(web,web-react): Ensure Slider renders correctly with non-zero `…

…min` values
lmc-eu · Jul 2, 2024 · f8ad545 · f8ad545
1 parent 2cf320f
commit f8ad545
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 32 deletions.
diff --git a/packages/web-react/src/components/UNSTABLE_Slider/UNSTABLE_Slider.tsx b/packages/web-react/src/components/UNSTABLE_Slider/UNSTABLE_Slider.tsx
@@ -35,7 +35,7 @@ const _UnstableSlider = (props: SpiritSliderProps, ref: ForwardedRef<HTMLInputEl
 
   const CSSVariable = '--slider-position';
 
-  const getSliderPosition = (num: number) => `${Math.round((100 * num) / max)}%`;
+  const getSliderPosition = (num: number) => `${Math.round((100 * (num - min)) / (max - min))}%`;
 
   const handleInput = (event: FormEvent<HTMLInputElement>) => {
     const { target } = event as ChangeEvent<HTMLInputElement>;

diff --git a/packages/web-react/src/components/UNSTABLE_Slider/constants.ts b/packages/web-react/src/components/UNSTABLE_Slider/constants.ts
@@ -1,5 +1,5 @@
 export const DEMO_SLIDER_DEFAULT_VALUE = 30;
-export const DEMO_SLIDER_STEPS_VALUE = 3;
+export const DEMO_SLIDER_STEPS_VALUE = 9;
 
 export const SLIDER_DEFAULT_PROPS = {
   max: 100, // @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#specifying_the_minimum_and_maximum

diff --git a/packages/web-react/src/components/UNSTABLE_Slider/demo/SliderDefault.tsx b/packages/web-react/src/components/UNSTABLE_Slider/demo/SliderDefault.tsx
@@ -20,7 +20,8 @@ const SliderDefault = () => {
       <UNSTABLE_Slider
         id="slider-steps"
         label="Custom steps"
-        max={10}
+        min={3}
+        max={12}
         value={stepsValue}
         onChange={handleStepsChange}
       />

diff --git a/packages/web/src/scss/components/UNSTABLE_Slider/README.md b/packages/web/src/scss/components/UNSTABLE_Slider/README.md
@@ -29,19 +29,21 @@ is required by Webkit-based browsers such as Chrome or Safari).
 
 You can specify the Slider steps and value range by setting the `min`, `max`, and `step` attributes on the input element.
 
+⚠️ Please note that the `--slider-position` CSS custom property must be initialized with a correct value. Also, it must
+be updated when the slider value changes. See the [Slider Position](#slider-position) section for more details.
+
 ```html
 <div class="UNSTABLE_Slider">
   <label for="slider-steps" class="UNSTABLE_Slider__label">Slider</label>
   <input
     class="UNSTABLE_Slider__input"
     id="slider-steps"
-    style="--slider-position: 30%"
+    style="--slider-position: calc(100% * (9 - 3) / (12 - 3))"
     type="range"
-    min="1"
-    max="100"
-    step="10"
-    value="30"
-    oninput="this.style.setProperty('--slider-position', `${Math.round((100 * this.value) / 100)}%`);"
+    value="9"
+    min="3"
+    max="12"
+    oninput="this.style.setProperty('--slider-position', `${Math.round(100 * (this.value - 3) / (12 - 3))}%`);"
   />
 </div>
 ```
@@ -53,24 +55,10 @@ property needs to be present when the Slider is initially rendered (see the `sty
 value changes (see the `oninput` handler with the calculation) which includes also the user's interaction with the
 slider.
 
-👉 Please note the value of `--slider-position` must be a **percentage value from 0 to 100**.
+👉 Please note the value of `--slider-position` must be a **percentage value from 0 to 100** and is calculated as follows:
 
-For example, with a value of 60 in a range from 0 to 200, the `--slider-position` property is 30 %:
-
-```html
-<div class="UNSTABLE_Slider">
-  <label for="slider-percentage" class="UNSTABLE_Slider__label">Slider</label>
-  <input
-    class="UNSTABLE_Slider__input"
-    id="slider-percentage"
-    style="--slider-position: 30%"
-    type="range"
-    value="60"
-    min="0"
-    max="200"
-    oninput="this.style.setProperty('--slider-position', `${Math.round((100 * this.value) / 200)}%`);"
-  />
-</div>
+```txt
+position = 100 * (value - min) / (max - min)
 ```
 
 ## Required

diff --git a/packages/web/src/scss/components/UNSTABLE_Slider/index.html b/packages/web/src/scss/components/UNSTABLE_Slider/index.html
@@ -21,13 +21,12 @@ <h2 class="docs-Heading">Default</h2>
       <input
         class="UNSTABLE_Slider__input"
         id="slider-steps"
-        style="--slider-position: 30%"
+        style="--slider-position: calc(100% * (9 - 3) / (12 - 3))"
         type="range"
-        min="0"
-        max="10"
-        step="1"
-        value="3"
-        oninput="this.style.setProperty('--slider-position', `${Math.round((100 * this.value) / 10)}%`);"
+        min="3"
+        max="12"
+        value="9"
+        oninput="this.style.setProperty('--slider-position', `${Math.round(100 * (this.value - 3) / (12 - 3))}%`);"
       />
     </div>