diff --git a/src/view/App.tsx b/src/view/App.tsx
index 9731aa6a1..5084bfd38 100644
--- a/src/view/App.tsx
+++ b/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} title={"slider"} step={1} min_label={"min"} max_label={"max"}/>
           <a
             className="App-link"
             href="https://github.com/microsoft/vscode-python-embedded"
diff --git a/src/view/components/toolbar/InputSlider.css b/src/view/components/toolbar/InputSlider.css
new file mode 100644
index 000000000..bf48324f2
--- /dev/null
+++ b/src/view/components/toolbar/InputSlider.css
@@ -0,0 +1,35 @@
+.sliderArea{
+    height: 32px;
+    border-color: brown;
+    background-color: greenyellow;
+}
+.sliderValue{
+    text-align: center;
+    width: 48px;
+    height: 32px;
+    background-color: var(--vscode-editor-background);
+    color: white;
+    border:0;
+    margin-right: 15px;
+    vertical-align: middle;
+    
+
+}
+
+.slider{
+    -webkit-appearance: none;
+    background-color: #cccccc;
+    color: var(--vscode-textLink-activeForeground);
+    vertical-align: middle;
+    height: 1px;
+    
+}
+.slider::-webkit-slider-thumb{
+    color: yellow;
+}
+.slider::-ms-track{
+    color: var(--vscode-textLink-activeForeground);
+}
+.slider:focus{
+    border: var(--focusBorder)
+}
\ No newline at end of file
diff --git a/src/view/components/toolbar/InputSlider.tsx b/src/view/components/toolbar/InputSlider.tsx
new file mode 100644
index 000000000..a7aa4a0cd
--- /dev/null
+++ b/src/view/components/toolbar/InputSlider.tsx
@@ -0,0 +1,50 @@
+// 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;
+    title: 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);
+    }
+
+    
+    render(){
+      return (
+        <div className="sliderArea">
+            <input className="sliderValue" value={this.state.value}/>        
+            <input type="range"  className="slider" aria-valuemin={this.props.min} aria-valuemax={this.props.max} step={this.props.step} title={this.props.title} onChange={this.handleOnChange} aria-valuenow={this.state.value}/>
+           
+        </div>  
+      )
+    }
+
+    private handleOnChange(event: React.ChangeEvent<HTMLInputElement>){
+       const inputElement = event.target 
+       const newValue = inputElement? inputElement.value:0;
+       this.setState({value:newValue});
+    
+    }
+
+}
+
+export default InputSlider;
+