Merged in react-no-ui-slider-component (pull request #5)

React no-ui Slider implementation

imports/plugins/core/ui/client/components/index.js

@@ -24,4 +24,5 @@ export * from "./toolbar";
 export { default as Popover } from "./popover/popover";
 export * from "./menu";
 export * from "./buttonGroup";
+export { default as Slider } from "./slider/slider";
 export { default as MultiSelect } from "./multiselect/multiselect";

imports/plugins/core/ui/client/components/slider/slider.js

@@ -0,0 +1,51 @@
+/**
+ * Implementing No UI Slider
+ * https://www.npmjs.com/package/react-nouislider
+ */
+import React, { Component, PropTypes } from "react";
+import Nouislider from "react-nouislider";
+
+class Slider extends Component {
+  render() {
+    return (
+      <Nouislider
+        range={this.props.range}
+        start={this.props.start}
+        tooltips={this.props.tooltips}
+        connect={this.props.connect}
+        step={this.props.step}
+        orientation={this.props.orientation}
+        margin={this.props.margin}
+        padding={this.props.padding}
+        onChange={this.props.onChange}
+      />
+    );
+  }
+}
+
+Slider.propTypes = {
+  range: PropTypes.object,
+  start: PropTypes.arrayOf(PropTypes.number),
+  connect: PropTypes.oneOfType([PropTypes.array, PropTypes.bool]),
+  step: PropTypes.number,
+  orientation: PropTypes.string,
+  tooltips: PropTypes.oneOfType([PropTypes.array, PropTypes.bool]),
+  margin: PropTypes.number,
+  padding: PropTypes.number,
+  onChange: PropTypes.func
+};
+
+Slider.defaultProps = {
+  range: {
+    min: 0,
+    max: 100
+  },
+  start: [0, 100],
+  step: 5,
+  orientation: "horizontal",
+  tooltips: true,
+  margin: 0,
+  padding: 0
+};
+
+export default Slider;

imports/plugins/core/ui/client/index.js

@@ -31,3 +31,8 @@ import "./components/textfield/textfield.html";
 
 import "./components/upload/upload.html";
 import "./components/upload/upload.js";
+
+// Safe css import for npm package
+import "nouislider-algolia-fork/src/nouislider.css";
+import "nouislider-algolia-fork/src/nouislider.pips.css";
+import "nouislider-algolia-fork/src/nouislider.tooltips.css";

package.json

@@ -73,6 +73,7 @@
     "react-dropzone": "^3.6.0",
     "react-helmet": "^3.1.0",
     "react-komposer": "^2.0.0",
+    "react-nouislider": "^1.14.2",
     "react-onclickoutside": "^5.7.1",
     "react-select": "^1.0.0-rc.2",
     "react-simple-di": "^1.2.0",