Merge pull request #119 from sflpro/feature/slider-controle-value-change

fix: Round inputSlider value by step on blur
sflpro · Mar 12, 2021 · 33e8f10 · 33e8f10
2 parents 4ece9d5 + a0a61a5
commit 33e8f10
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 16 deletions.
diff --git a/src/InputSlider/index.js b/src/InputSlider/index.js
@@ -68,6 +68,20 @@ export class InputSlider extends React.Component {
     }
   };
 
+  getStepValue = (value) => {
+    const { min, max, step } = this.props;
+
+    if (value && step) {
+      const newVal = +(Math.round(value / step)) * step;
+
+      if (!Number.isNaN(newVal) && newVal >= min && newVal <= max) {
+        return newVal;
+      }
+    }
+
+    return value;
+  };
+
   onBlur = (event) => {
     const { min, max, distance, inputProps: { onBlur, formatter = null }, separator, children } = this.props;
     const { minControl, maxControl, value } = this.state;
@@ -142,6 +156,9 @@ export class InputSlider extends React.Component {
       nextState.maxControl.value = max;
     }
 
+    nextState.minControl.value = this.getStepValue(nextState.minControl.value);
+    nextState.maxControl.value = this.getStepValue(nextState.maxControl.value);
+
     if (nextState.minControl.value < min) {
       nextState.minControl.value = min;
     }
@@ -150,22 +167,20 @@ export class InputSlider extends React.Component {
       nextState.minControl.value = max;
     }
 
-    if (nextState.maxControl) {
-      if (nextState.maxControl.value < min) {
-        nextState.maxControl.value = min;
-      }
+    if (nextState.maxControl.value < min) {
+      nextState.maxControl.value = min;
+    }
 
-      if (nextState.maxControl.value > max) {
-        nextState.maxControl.value = max;
-      }
+    if (nextState.maxControl.value > max) {
+      nextState.maxControl.value = max;
+    }
 
-      if (nextState.maxControl.value <= nextState.minControl.value) {
-        nextState.maxControl.value = nextState.minControl.value + distance;
-      }
+    if (nextState.maxControl.value <= nextState.minControl.value) {
+      nextState.maxControl.value = nextState.minControl.value + distance;
+    }
 
-      if (nextState.minControl.value >= nextState.maxControl.value) {
-        nextState.minControl.value = nextState.maxControl.value - distance;
-      }
+    if (nextState.minControl.value >= nextState.maxControl.value) {
+      nextState.minControl.value = nextState.maxControl.value - distance;
     }
 
     nextState.value = (nextState.maxControl && nextState.maxControl.value

diff --git a/src/InputSlider/inputSlider.story.js b/src/InputSlider/inputSlider.story.js
@@ -18,7 +18,7 @@ import { InfoStoryConfig } from '../configs';
 storiesOf('Form controls/Input Slider', module)
   .add('Examples', () => {
     const store = new Store({
-      test1: 75,
+      test1: 7500,
       test2: 36,
       test3: 55,
       min1: 25,
@@ -44,8 +44,9 @@ storiesOf('Form controls/Input Slider', module)
               <Item style={{ width: '40%' }}>
                 <InputSlider
                   onChange={handler}
-                  min={5}
-                  step={5}
+                  min={500}
+                  step={100}
+                  max={10000}
                   hasError
                 >
                   <Control name='test1' value={state.test1} icon={<Icon name='tracker' />} />