Added sandbox

imports/ui/layouts/App/App.js

@@ -40,6 +40,7 @@ import Blaze from 'meteor/gadicc:blaze-react-component';
 import createHistory from 'history/createBrowserHistory';
 import { check } from 'meteor/check';
 import FiresMap from  '../../pages/FiresMap/FiresMap';
+import Sandbox from  '../../pages/Sandbox/Sandbox';
 
 import './App.scss';
 
@@ -68,6 +69,7 @@ const App = props => (
           <Public path="/signup" component={Signup} {...props} />
           <Public path="/login" component={Login} {...props} />
           <Route path="/logout" component={Logout} {...props} />
+          <Route path="/sandbox" component={Sandbox} {...props} />
           <Route name="verify-email" path="/verify-email/:token" component={VerifyEmail} />
           <Route name="recover-password" path="/recover-password" component={RecoverPassword} />
           <Route name="reset-password" path="/reset-password/:token" component={ResetPassword} />

imports/ui/pages/Sandbox/Sandbox.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'react-bootstrap';
+import { Trans, translate } from 'react-i18next';
+import Slider, { Range } from 'rc-slider';
+import Tooltip from 'rc-tooltip';
+// We can just import Slider or Range to reduce bundle size
+// import Slider from 'rc-slider/lib/Slider';
+// import Range from 'rc-slider/lib/Range';
+import 'rc-slider/assets/index.css';
+
+// https://www.npmjs.com/package/rc-slider
+const createSliderWithTooltip = Slider.createSliderWithTooltip;
+const Handle = Slider.Handle;
+
+const handle = (props) => {
+  const { value, dragging, index, ...restProps } = props;
+  return (
+    <Tooltip
+      prefixCls="rc-slider-tooltip"
+      overlay={value}
+      visible={dragging}
+      placement="top"
+      key={index}
+    >
+      <Handle value={value} {...restProps} />
+    </Tooltip>
+  );
+};
+const wrapperStyle = { width: 400, margin: 50 };
+
+const Sandbox = props => (
+  <div style={wrapperStyle}>
+    <Slider min={5}
+            max={100}
+            trackStyle={{ backgroundColor: 'green', height: 8 }}
+            railStyle={{ backgroundColor: 'orange', height: 8 }}
+            handleStyle={{
+              borderColor: 'green',
+              height: 20,
+              width: 20,
+              marginLeft: -14,
+              marginTop: -6,
+              /* backgroundColor: 'gray', */
+            }}
+            defaultValue={10}
+            step={5}
+            handle={handle} />
+  </div>
+);
+
+Sandbox.defaultProps = {
+};
+
+Sandbox.propTypes = {
+};
+
+export default translate([], { wait: true })(Sandbox);