Included slider library. Slider adapts to orientation changes

package.json

@@ -21,7 +21,8 @@
     "react-router": "^3.0.2",
     "superagent": "^3.5.0",
     "gaugeJS": "^1.3.2",
-    "d3-scale": "^1.0.5"
+    "d3-scale": "^1.0.5",
+    "rc-slider": "^7.0.1"
   },
   "devDependencies": {
     "react-scripts": "0.9.3"

src/components/widget-slider.js

@@ -9,6 +9,8 @@
 
 import React, { Component } from 'react';
 import classNames from 'classnames';
+import Slider from 'rc-slider';
+import 'rc-slider/assets/index.css';
 
 class WidgetSlider extends Component {
 
@@ -27,43 +29,68 @@ class WidgetSlider extends Component {
     };
   }
 
-  valueChanged(e) {
-    this.setState({ value: e.target.value });
+  componentWillReceiveProps(nextProps) {
+    // Update value
+    if (nextProps.widget.value && this.state.value !== nextProps.widget.value) {
+      this.setState({ value: nextProps.widget.value })
+    }
+    // Check if the orientation changed, update the size if it did
+    if (this.props.widget.orientation !== nextProps.widget.orientation) {
+      let baseWidget = nextProps.widget;
+      // Exchange dimensions and constraints
+      let newWidget = Object.assign({}, baseWidget, { 
+        width: baseWidget.height,
+        height: baseWidget.width,
+        minWidth: baseWidget.minHeight,
+        minHeight: baseWidget.minWidth,
+        maxWidth: baseWidget.maxHeight,
+        maxHeight: baseWidget.maxWidth
+      });
+      nextProps.onWidgetChange(newWidget);
+    }
+  }
+
+  valueIsChanging(newValue) {
+    this.setState({ value: newValue });
+  }
+
+  valueChanged(newValue) {
+    // Enable to propagate action
+    // let newWidget = Object.assign({}, this.props.widget, { 
+    //     value: newValue
+    //   });
+    // this.props.onWidgetChange(newWidget);
   }
 
   render() {
+    
+    let isVertical = this.props.widget.orientation === WidgetSlider.OrientationTypes.VERTICAL.value;
+
     let fields = {
       'name': this.props.widget.name,
-      'control': <input type="range"  min="0" max="100" disabled={ this.props.editing } onChange={ (e) => this.valueChanged(e) } defaultValue={ this.state.value }/>,
+      'control': <Slider min={0} max={100} value={ this.state.value } step={ 0.1 } disabled={ this.props.editing } vertical={ isVertical } onChange={ (v) => this.valueIsChanging(v) } onAfterChange={ (v) => this.valueChanged(v) }/>,
       'value': this.state.value
     }
 
-    let vertical = this.props.widget.orientation === WidgetSlider.OrientationTypes.VERTICAL.value;
     var widgetClasses = classNames({
                     'slider-widget': true,
                     'full': true,
-                    'vertical': vertical,
-                    'horizontal': !vertical
+                    'vertical': isVertical,
+                    'horizontal': !isVertical
                   });
 
     return (
       this.props.widget.orientation === WidgetSlider.OrientationTypes.HORIZONTAL.value? (
         <div className={widgetClasses}>
-          <div>
-            <label>{ fields.name }</label>
-          </div>
-          <div>
-            { fields.control }
-            <span>{ fields.value }</span>
-          </div>
+          <label>{ fields.name }</label>
+          <div className='slider'>{ fields.control }</div>
+          <span>{ fields.value }</span>
         </div>
       ) : (
         <div className={widgetClasses}>
-          <div>
-            <label>{ fields.name }</label>
-            <span>{ fields.value }</span>
-          </div>
-          <div>{ fields.control }</div>
+          <label>{ fields.name }</label>
+          { fields.control }
+          <span>{ fields.value }</span>
         </div>
       )
     );

src/containers/visualization.js

@@ -192,8 +192,11 @@ class Visualization extends Component {
       widget.width = 200;
       widget.height = 50;
     } else if (item.name === 'Slider') {
-      widget.minWidth = 380;
-      widget.minHeight = 30;
+      // Set dimensions and constraints as Horizontal
+      widget.minWidth = 150;
+      widget.minHeight = 50;
+      widget.maxHeight = 51;
+      widget.maxWidth = 1000;
       widget.width = 400;
       widget.height = 50;
       widget.orientation = WidgetSlider.OrientationTypes.HORIZONTAL.value; // Assign default orientation

src/containers/widget.js

@@ -143,7 +143,7 @@ class Widget extends Component {
     } 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} />
+      element = <WidgetSlider widget={widget} editing={this.props.editing} onWidgetChange={(w) => this.props.onWidgetStatusChange(w, this.props.index) } />
     } else if (widget.type === 'Gauge') {
       element = <WidgetGauge widget={widget} data={this.state.simulatorData} editing={this.props.editing} simulation={this.props.simulation} />
     }

src/styles/widgets.css

@@ -288,52 +288,70 @@ div[class*="-widget"] label {
 }
 /* End number input widget */ 
 
-/* Slider widget */
-.slider-widget.vertical input[type="range"] {
-   position: absolute;
-   top: 40%;
-   left: 50%;
-   transform: rotate(270deg);
-   /*margin-left: 20px;*/
-   width: 150px;
-}
-
-input[type=range]::-moz-range-thumb {
-    background: #ffffff;
-}
-
-input[type=range]::-webkit-slider-thumb {
-    background: #ffffff;
-}
-
-input[type=range]::-ms-thumb {
-    background: #ffffff;
-}
-
-.slider-widget.horizontal div {
-    width: 50%;
-    display: inline-block;
-    text-align: center;
-    vertical-align: top;
-}
-
-.slider-widget.horizontal span {
-    display: block;
-    margin: 5px;
-}
-
-.slider-widget.vertical div {
-    width: 50%;
+/* Begin Slider widget */
+.slider-widget {
     display: flex;
-    flex-direction: column;
     align-items: center;
     justify-content: space-around;
 }
 
+.slider-widget label {
+    flex: 0 0 auto;
+    text-align: center;
+}
+
 .slider-widget span {
+    text-align: center;
     font-size: 1.5em;
     font-weight: 600;
 }
+
+.slider-widget.horizontal .slider {
+    flex: 1 1 auto;
+}
+
+.slider-widget.horizontal span {
+    flex: 0 0 50pt;
+}
+
+.slider-widget.horizontal label {
+    padding-right: 10px;
+}
+
+.slider-widget.vertical {
+    flex-direction: column;
+}
+
+.slider-widget.vertical span {
+    padding-top: 10px;
+}
+
+.slider-widget.vertical label {
+    padding-bottom: 10px;
+}
+
+/* Begin Slider customization */
+.rc-slider-track {
+    background-color: #6EA2B0;
+}
+
+.rc-slider-handle, .rc-slider-handle:hover {
+    border-color: #6EA2B0;
+}
+
+.rc-slider-disabled {
+    background-color: inherit;
+}
+
+.rc-slider-disabled .rc-slider-handle {
+    cursor: inherit;
+}
+
+.rc-slider-disabled .rc-slider-handle:hover {
+    border-color:#ccc;
+}
+/* End Slider customization */
+
 /* End slider widget */
 
 /* Gauge widget */