Giving Input Slider text box enough width (microsoft#364)

Author: eishan05

src/view/components/toolbar/InputSlider.tsx

@@ -38,6 +38,7 @@ class InputSlider extends React.Component<ISliderProps, any, any> {
                             .length
                     }}[.]{0,${nbDecimals > 0 ? 1 : 0}}[0-9]{0,${nbDecimals}}$`}
                     onKeyUp={this.handleOnChange}
+                    style={{ width: this.getMaximumBoxWidth() + "ch" }}
                     aria-label={`${this.props.type} sensor input ${this.props.axisLabel}`}
                 />
                 <span className="sliderArea">
@@ -71,6 +72,15 @@ class InputSlider extends React.Component<ISliderProps, any, any> {
         );
     }
 
+    private getMaximumBoxWidth = () => {
+        return (
+            Math.max(
+                this.props.minValue.toString().length,
+                this.props.maxValue.toString().length
+            ) + 2
+        );
+    };
+
     private handleOnChange = (event: any) => {
         const validatedValue = this.validateRange(this.updateValue(event));
         const newSensorState = this.writeMessage(validatedValue);