fix(Slider): Slider min no reflects the correct percentage on the slider

wfp · Feb 16, 2021 · 4875d6c · 4875d6c
1 parent f86ad11
commit 4875d6c
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 deletions.
diff --git a/src/components/Slider/Slider.js b/src/components/Slider/Slider.js
@@ -73,12 +73,13 @@ function Slider(props) {
       if (evt.target.value > max) {
         setValue(max);
         onChange(parseFloat(max), evt);
-      } else {
+      } /* else if (evt.target.value < min) {
+        setValue(evt.target.value);
+        onChange(parseFloat(min), evt);
+      }*/ else {
         setValue(evt.target.value);
         onChange(parseFloat(evt.target.value), evt);
       }
-      // setValue(evt.target.value);
-      // onChange(parseFloat(evt.target.value), evt);
     }
   };
 
@@ -114,6 +115,8 @@ function Slider(props) {
     className
   );
 
+  const valueMinimal = value < min ? min : value;
+  console.log('value', min, max);
   return (
     <Input {...props} formItemClassName={numberInputClasses}>
       {() => {
@@ -126,7 +129,9 @@ function Slider(props) {
             <div className="wfp--slider__range-wrapper">
               <div
                 className="wfp--slider__range-before"
-                style={{ width: `${(100 * value) / max}%` }}
+                style={{
+                  width: `${((valueMinimal - min) / (max - min)) * 100}%`,
+                }}
               />
               <input
                 className={sliderClasses}

diff --git a/src/components/Slider/Slider.stories.js b/src/components/Slider/Slider.stories.js
@@ -17,7 +17,7 @@ export const RegularSlider = (args) => <Slider id="slider2" {...args} />;
 RegularSlider.args = {
   name: 'Form item name (name)',
   value: 25,
-  min: 0,
+  min: 10,
   max: 50,
   step: 1,
   labelText: 'Slider Label',

diff --git a/src/components/Slider/_slider.scss b/src/components/Slider/_slider.scss
@@ -166,7 +166,6 @@
   }
 
   .#{$prefix}--slider__range-before {
-    width: 100px;
     height: 3px;
     background: var(--interactive-01);
     position: absolute;