From 84dcb382892fbe517f0e98ee954ddf4211523b3f Mon Sep 17 00:00:00 2001
From: lorenzo <lorenzo@artlimes.com>
Date: Sun, 1 Jan 2017 15:43:38 +0200
Subject: [PATCH] React no-ui Slider implementation

---
 .../core/ui/client/components/index.js        |  1 +
 .../ui/client/components/slider/slider.js     | 51 +++++++++++++++++++
 imports/plugins/core/ui/client/index.js       |  5 ++
 package.json                                  |  1 +
 4 files changed, 58 insertions(+)
 create mode 100644 imports/plugins/core/ui/client/components/slider/slider.js

diff --git a/imports/plugins/core/ui/client/components/index.js b/imports/plugins/core/ui/client/components/index.js
index 4317ec9d822..905cf7732bf 100644
--- a/imports/plugins/core/ui/client/components/index.js
+++ b/imports/plugins/core/ui/client/components/index.js
@@ -24,3 +24,4 @@ export * from "./toolbar";
 export { default as Popover } from "./popover/popover";
 export * from "./menu";
 export * from "./buttonGroup";
+export { default as Slider } from "./slider/slider";
diff --git a/imports/plugins/core/ui/client/components/slider/slider.js b/imports/plugins/core/ui/client/components/slider/slider.js
new file mode 100644
index 00000000000..ba3cbfc2ae9
--- /dev/null
+++ b/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;
diff --git a/imports/plugins/core/ui/client/index.js b/imports/plugins/core/ui/client/index.js
index 81a92ad1442..eca72e28a42 100644
--- a/imports/plugins/core/ui/client/index.js
+++ b/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";
diff --git a/package.json b/package.json
index 928d635db1d..8949717f83c 100644
--- a/package.json
+++ b/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-simple-di": "^1.2.0",
     "react-taco-table": "^0.5.0",