initial slider widget

src/components/widget-slider.js

@@ -0,0 +1,48 @@
+/**
+ * File: widget-slider.js
+ * Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
+ * Date: 30.03.2017
+ * Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC
+ *   This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
+ *   Unauthorized copying of this file, via any medium is strictly prohibited.
+ **********************************************************************************/
+
+import React, { Component } from 'react';
+import { Form, FormGroup, Col, ControlLabel } from 'react-bootstrap';
+
+class WidgetSlider extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+        value: 50
+    };
+  }
+
+  valueChanged(e) {
+    this.setState({ value: e.target.value });
+  }
+
+  render() {
+    return (
+      <div className="slider-widget full">
+          <Form componentClass="fieldset" horizontal>
+              <FormGroup validationState={ this.state.validationState} >
+                  <Col componentClass={ControlLabel} xs={3}>
+                    {this.props.widget.name}
+                  </Col>
+                  <Col xs={8}>
+                    <input type="range"  min="0" max="100" disabled={ this.props.editing } onChange={ (e) => this.valueChanged(e) } defaultValue={ this.state.value }/>
+                  </Col>
+                  <Col xs={1}>
+                    <span>{ this.state.value }</span>
+                  </Col>
+                </FormGroup>
+            </Form>
+      </div>
+    );
+  }
+}
+
+export default WidgetSlider;

src/containers/visualization.js

@@ -183,6 +183,11 @@ class Visualization extends Component {
       widget.minHeight = 50;
       widget.width = 200;
       widget.height = 50;
+    } else if (item.name === 'Slider') {
+      widget.minWidth = 380;
+      widget.minHeight = 30;
+      widget.width = 400;
+      widget.height = 50;
     }
 
     var new_widgets = this.state.visualization.widgets;
@@ -353,6 +358,7 @@ class Visualization extends Component {
               <ToolboxItem name="PlotTable" type="widget" />
               <ToolboxItem name="Button" type="widget" />
               <ToolboxItem name="NumberInput" type="widget" />
+              <ToolboxItem name="Slider" type="widget" />
             </div>
           }
 

src/containers/widget.js

@@ -24,6 +24,7 @@ import WidgetPlotTable from '../components/widget-plot-table';
 import WidgetImage from '../components/widget-image';
 import WidgetButton from '../components/widget-button';
 import WidgetNumberInput from '../components/widget-number-input';
+import WidgetSlider from '../components/widget-slider';
 
 import '../styles/widgets.css';
 
@@ -134,6 +135,8 @@ class Widget extends Component {
       element = <WidgetButton widget={widget} editing={this.props.editing} />
     } else if (widget.type === 'NumberInput') {
       element = <WidgetNumberInput widget={widget} editing={this.props.editing} />
+    } else if (widget.type === 'Slider') {
+      element = <WidgetSlider widget={widget} editing={this.props.editing} />
     }
     
     if (this.props.editing) {

src/styles/widgets.css

@@ -113,7 +113,7 @@
 }
 
 /* Reset Bootstrap styles to "disable" while editing */
-div[class*="-widget"] .btn[disabled], .form-control[disabled] {
+div[class*="-widget"] .btn[disabled], div[class*="-widget"] input[disabled], .form-control[disabled] {
   cursor: inherit;
   pointer-events: none;
 }
@@ -177,7 +177,19 @@ div[class*="-widget"] .btn[disabled], .form-control[disabled] {
 }
 
 /* Number input widget */ 
-.number-input-widget label {
+div[class*="-widget"] label {
     cursor: inherit;
 }
-/* Number input widget */ 
+/* End number input widget */ 
+
+input[type=range]::-moz-range-thumb {
+    background: #ffffff;
+}
+
+input[type=range]::-webkit-slider-thumb {
+    background: #ffffff;
+}
+
+input[type=range]::-ms-thumb {
+    background: #ffffff;
+}