Range Slider - creating component

ui/docs/containers/app/index.js

@@ -7,6 +7,7 @@ const ReactRouter = require('react-router');
 const Navigation = require('./navigation.js');
 const Home = require('../home');
 const Item = require('../item/');
+// const Item = require('../../../src/components/range-slider');
 
 const {
   Base,

ui/src/components/range-slider/index.js

@@ -0,0 +1,35 @@
+const classNames = require('classnames');
+const React = require('react');
+const styles = require('./style.css');
+
+const RangeSlider = ({
+  className,
+  style
+}) => {
+
+  const slider = classNames(
+    className,
+    styles.input
+  );
+
+  // TODO: Get rid of inline styles
+  style = {
+    ...style,
+    display: 'block'
+  };
+
+  return (
+    <input
+      className={slider}
+      style={style}
+      type="range"
+    />
+  );
+};
+
+RangeSlider.propTypes = {
+  className: React.PropTypes.string,
+  style: React.PropTypes.object
+};
+
+module.exports = RangeSlider;

ui/src/components/range-slider/readme.md

@@ -0,0 +1,37 @@
+# `<RangeSlider>`
+
+## demo
+
+```embed
+const React = require('react');
+const ReactDOM = require('react-dom/server');
+const Base = require('../base');
+const Container = require('../container');
+const Row = require('../row');
+const Column = require('../column');
+const RangeSlider = require('./index.js');
+const styles = require('./style.css');
+
+nmodule.exports = ReactDOM.renderToString(
+  <Base>
+    <Row>
+      <Column xs={6}>
+        <RangeSlider />
+      </Column>
+    </Row>
+  </Base>
+);
+```
+
+## usage
+
+```js
+const React = require('react');
+const RangeSlider = require('ui/range-slider');
+
+module.exports = () => {
+  return (
+    <RangeSlider />
+  );
+}
+```

ui/src/components/range-slider/style.css

@@ -0,0 +1,103 @@
+~colors: "../../shared/constants.js";
+~boxes: "../../shared/constants.js";
+
+:root {
+  --primary-background: ~colors.brandPrimary;
+  --box-shaddow: ~boxes.bottomShaddow;
+  --box-border: ~boxes.border.unchecked;
+}
+
+.input[type="range"] {
+  -webkit-appearance: none;
+  margin: 10px 0;
+  width: 100%;
+
+  // Try and figure out why display none is being set in doc.css
+  display: block;
+  visibility: visible;
+
+  &:focus {
+    outline: none;
+  }
+  &::-webkit-slider-runnable-track {
+    animate: 0.2s;
+    background: var(--primary-background);
+    border: var(--box-border);
+    border-radius: 25px;
+    box-shadow: var(--box-shaddow);
+    cursor: pointer;
+    height: 12.8px;
+    width: 100%;
+  }
+  &::-webkit-slider-thumb {
+    background: #ffffff;
+    border: solid 1px #d8d8d8;
+    border-radius: 4px;
+    box-shadow: var(--box-shaddow);
+    cursor: pointer;
+    display: inline-block;
+    height: 24px;
+    margin-top: -3.6px;
+    width: 36px;
+    -webkit-appearance: none;
+  }
+  &:focus::-webkit-slider-runnable-track {
+    background: var(--primary-background);
+  }
+  &::-moz-range-track {
+    animate: 0.2s;
+    background: var(--primary-background);
+    border: var(--box-border);
+    border-radius: 25px;
+    box-shadow: var(--box-shaddow);
+    cursor: pointer;
+    height: 12.8px;
+    width: 100%;
+  }
+  &::-moz-range-thumb {
+    background: #65001c;
+    box-shadow: var(--box-shaddow);
+    border: 0px solid #000000;
+    border-radius: 7px;
+    cursor: pointer;
+    height: 20px;
+    width: 39px;
+  }
+  &::-ms-track {
+    animate: 0.2s;
+    background: transparent;
+    borded: transparent;
+    border-width: 39px 0;
+    color: transparent;
+    cursor: pointer;
+    height: 12.8px;
+    width: 100%;
+  }
+  &::-ms-fill-lower {
+    background: var(--primary-background);
+    border: var(--box-border);
+    border-radius: 50px;
+    box-shadow: var(--box-shaddow);
+  }
+  &::-ms-fill-upper {
+    background: #e6e6e6;
+    border: var(--box-border);
+    border-radius: 50px;
+    box-shadow: var(--box-shaddow);
+  }
+  &::-ms-thumb {
+    background: #65001c;
+    border: 0px solid #000000;
+    border-radius: 7px;
+    box-shadow: var(--box-shaddow);
+    cursor: pointer;
+    height: 20px;
+    width: 39px;
+  }
+  &:focus::-ms-fill-lower {
+    background: var(--primary-background);
+  }
+  &:focus::-ms-fill-upper {
+    background: #e6e6e6;
+  }
+}

ui/src/docs.js

@@ -14,6 +14,7 @@ module.exports = {
     'Radio Group': require('./components/radio-group/readme.md'),
     Column: require('./components/column/readme.md'),
     Button: require('./components/button/readme.md'),
+    'Range Slider': require('./components/range-slider/readme.md'),
     Toggle: require('./components/toggle/readme.md'),
     Checkbox: require('./components/checkbox/readme.md'),
     Tab: require('./components/tab/readme.md'),

ui/src/index.js

@@ -10,6 +10,7 @@ module.exports = {
   Tabs: require('./components/tabs'),
   Toggle: require('./components/toggle'),
   Input: require('./components/input'),
+  'Range Slider': require('./components/range-slider/'),
   Radio: require('./components/radio'),
   RadioGroup: require('./components/radio-group'),
   Widget: require('./components/widget')

ui/src/shared/constants.js

@@ -67,7 +67,7 @@ const sizes = {
 };
 
 const boxes = {
-  borderRadius: 4,
+  borderRadius: '4px',
   bottomShaddow: '0 2px 0 0 rgba(0, 0, 0, 0.05)',
   insetShaddow: 'inset 0 3px 0 0 rgba(0, 0, 0, 0.05)',
   border: {

ui/webpack/base.js

@@ -24,7 +24,9 @@ const plugins = {
           require('postcss-cssnext')()
         ]
       },
-      'embed-markdown-loader': {}
+      'embed-markdown-loader': {
+        mode: 'plain'
+      }
     }
   })
 };