Merge pull request #57 from microsoft/users-t-famoun/sliderBar

Created the slider Bar to control sensor inputs.

Author: FMounz

src/view/App.tsx

@@ -4,6 +4,7 @@
 "use strict";
 import * as React from "react";
 import Simulator from "./components/Simulator";
+import InputSlider from "./components/toolbar/InputSlider"
 import "./App.css";
 
 class App extends React.Component {
@@ -12,6 +13,7 @@ class App extends React.Component {
       <div className="App">
         <header className="App-header">
           <Simulator />
+          <InputSlider min={0} max={250} step={1} min_label={"min"} max_label={"max"}/>
           <a
             className="App-link"
             href="https://github.com/microsoft/vscode-python-embedded"

src/view/components/toolbar/InputSlider.css

@@ -0,0 +1,82 @@
+
+.inputSlider{
+    height: 50px;
+    margin-bottom: 100px;
+}
+.sliderValue{
+    text-align: center;
+    width: 50px;
+    height: 50px;
+    background-color: var(--vscode-editor-background);
+    color: white;
+    border:0;
+    margin-right: 15px;
+}
+
+.slider{
+    -webkit-appearance: none;
+    background-color: #cccccc;
+    height: 1px;
+    width: 280px;
+    vertical-align: middle;
+    
+}
+.slider::-webkit-slider-thumb{
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%; 
+    background:var(--vscode-textLink-activeForeground);
+    cursor: pointer;
+}
+
+.slider::-webkit-slider-runnable-track:focus,
+.inputSlider:focus,
+.slider:focus{
+    outline: none;
+}
+
+.sliderValue:focus{
+    outline-color:  var(--vscode-textLink-activeForeground);
+}
+.maxLabel,
+.minLabel{
+    display: inline-block;
+    font-size: 12px;
+    position: relative;
+    vertical-align: top;
+
+}
+
+.maxLabel{
+    margin-left: 220px;
+}
+
+.sliderArea,
+.sliderValue{
+    display: inline-block;
+}
+
+.sliderArea{
+    width: 280px;
+    height: 30px;
+    vertical-align: middle;
+
+}
+.downLabelArea{
+    width: 280px;
+    height: 15px;
+    margin-top: 10px
+
+}
+.upLabelArea{
+    width: 280px;
+    height: 15px;
+    margin-bottom: 10px;
+
+}
+
+.slider,.upLabelArea,.downLabelArea{
+    display: block;
+}

src/view/components/toolbar/InputSlider.tsx

@@ -0,0 +1,88 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import * as React from "react";
+import "./InputSlider.css"
+
+interface ISliderProps{
+    min:number;
+    max: number;
+    min_label: string;
+    max_label: string;
+    step:number;
+}
+
+
+
+class InputSlider extends React.Component<ISliderProps,any,any>{
+
+    constructor(props: ISliderProps){
+        super(props);
+        this.state = {
+            value:0,
+        };
+
+        this.handleOnChange = this.handleOnChange.bind(this);
+        this.validateRange = this.validateRange.bind(this);
+    }
+
+    
+    render(){
+      return (
+        <div className="inputSlider">
+            <input type="text"  className="sliderValue" value={this.state.value} 
+            onInput={this.handleOnChange} defaultValue={this.props.min.toLocaleString()} pattern="^-?[0-9]*$" onKeyUp={this.validateRange}/>        
+            <div className="sliderArea">
+                <div className="upLabelArea">
+                    <div className='minLabel'>
+                        {this.props.min_label}
+                    </div>
+                    <div className='maxLabel'>
+                        {this.props.max_label}
+                    </div>
+                </div>
+                <input type="range"  className="slider" min={this.props.min} max={this.props.max} 
+                step={this.props.step} onChange={this.handleOnChange} value={this.state.value} defaultValue={this.props.min.toLocaleString()}/>
+                <div className="downLabelArea">
+                    <div className='minLabel'>
+                        {this.props.min_label}
+                    </div>
+                    <div className='maxLabel'>
+                        {this.props.max_label}
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        
+      )
+    }
+
+    private handleOnChange(event: React.ChangeEvent<HTMLInputElement>){
+       this.updateValue(event);
+       this.validateRange();
+    
+    
+    }
+
+    private updateValue(event: React.ChangeEvent<HTMLInputElement>){
+        const newValue = (event.target.validity.valid) ? event.target.value : this.state.value;
+        this.setState({value:newValue});
+        
+    }
+
+    private validateRange(){
+        if(this.state.value<this.props.min){
+            this.setState({value:this.props.min,dummy:2});
+        }
+        if(this.state.value>this.props.max){
+            this.setState({value:this.props.max,dummy:1});
+        }
+
+    }
+
+
+}
+
+export default InputSlider;
+