Fix bug occuring when value exceed bounds in slider input (#114)

[Bug 32632]
* soved bug with input and capacitive touch

* using shift instead

* Fixing input bound issues

* restore old version

* restoring old version

* change value update method

* solving send message delay

* removing comments

* removed duplicated code

* clean upaccording to review and cs

* removing redundant lines

* correcting review suggestion issues

Author: FMounz

src/view/components/toolbar/InputSlider.tsx

@@ -62,7 +62,7 @@ class InputSlider extends React.Component<ISliderProps, any, any> {
           onInput={this.handleOnChange}
           defaultValue={this.props.minValue.toLocaleString()}
           pattern="^-?[0-9]{0,3}$"
-          onKeyUp={this.validateRange}
+          onKeyUp={this.handleOnChange}
           aria-label={`${this.props.type} sensor input ${this.props.axisLabel}`}
         />
         <span className="sliderArea">
@@ -92,36 +92,45 @@ class InputSlider extends React.Component<ISliderProps, any, any> {
     );
   }
 
-  private handleOnChange(event: React.ChangeEvent<HTMLInputElement>) {
-    this.updateValue(event);
-    this.validateRange();
-    const newSensorState = this.writeMessage(event);
+  private handleOnChange = (event: any) => {
+    const validatedValue = this.validateRange(this.updateValue(event));
+
+    const newSensorState = this.writeMessage(validatedValue);
     if (newSensorState) {
       sendMessage(newSensorState);
     }
-  }
+  };
 
-  private writeMessage(event: React.ChangeEvent<HTMLInputElement>) {
-    return this.props.type && this.state.value && event.target.value
-      ? { [this.props.type]: parseInt(event.target.value, 10) }
+  private writeMessage = (valueTowrite: number) => {
+    let value = valueTowrite;
+    if (value > this.props.maxValue || value < this.props.minValue) {
+      value = parseInt(this.state.value, 10);
+    }
+
+    return this.props.type && this.state.value
+      ? { [this.props.type]: value }
       : undefined;
-  }
+  };
 
-  private updateValue(event: React.ChangeEvent<HTMLInputElement>) {
+  private updateValue = (event: any) => {
     const newValue = event.target.validity.valid
       ? event.target.value
       : this.state.value;
     this.setState({ value: newValue });
-  }
+    return newValue;
+  };
 
-  private validateRange() {
-    if (this.state.value < this.props.minValue) {
-      this.setState({ value: this.props.minValue });
+  private validateRange = (valueString: string) => {
+    let valueInt = parseInt(valueString, 10);
+    if (valueInt < this.props.minValue) {
+      valueInt = this.props.minValue;
+      this.setState({ value: valueInt });
+    } else if (valueInt > this.props.maxValue) {
+      valueInt = this.props.maxValue;
+      this.setState({ value: valueInt });
     }
-    if (this.state.value > this.props.maxValue) {
-      this.setState({ value: this.props.maxValue });
-    }
-  }
+    return valueInt;
+  };
 }
 
 export default InputSlider;