Slider #2

package.json

@@ -49,12 +49,14 @@
   "dependencies": {
     "@types/classnames": "^2.2.0",
     "@types/cookie": "^0.3.1",
+    "@types/lodash": "^4.14.150",
     "@types/random-seed": "^0.3.2",
     "@types/react": ">= 15",
     "@types/react-dom": ">= 15",
     "@types/react-transition-group": "^1.1.4",
     "classnames": "^2.2.5",
     "cookie": "^0.3.1",
+    "lodash": "^4.17.15",
     "normalize.css": "^8.0.1",
     "random-seed": "^0.3.0",
     "react": ">= 15",

src/less/index.less

@@ -25,6 +25,7 @@
 @import 'speech-bubble.less';
 @import 'code-block.less';
 @import 'highlight.less';
+@import 'slider.less';
 // NOTE: These must remain after the other imports
 @import 'float.less';
 @import 'display.less';

src/less/slider.less

@@ -0,0 +1,80 @@
+.slider {
+  padding: @padding-large;
+  padding-top: @padding-large * 2;
+
+  .bar {
+    height: @slider-bar-thickness;
+    position: relative;
+
+    .background {
+      position: absolute;
+      top: 0;
+      height: 100%;
+      background-color: @slider-bar-background;
+
+      &:last-of-type {
+        right: 0;
+        width: 100%;
+      }
+    }
+
+    .range {
+      position: absolute;
+      top: 0;
+      height: 100%;
+      background-color: @slider-range-color;
+      z-index: @slider-z-index - 1;
+    }
+
+    .control {
+      position: relative;
+      width: @slider-control-width;
+      height: @slider-control-height;
+      top: 50%;
+      left: 0;
+      float: left;
+      transform: translate(-100%, -50%);
+      background-color: @slider-control-background;
+      cursor: ew-resize;
+      border-radius: @slider-control-border-radius;
+      z-index: @slider-z-index;
+
+      .control-popover {
+        position: absolute;
+        display: inline-table;
+        top: -1.4em;
+        width: 2.5em;
+        height: 2em;
+        transform: translate(-30%, -50%);
+        text-align: center;
+        background-color: @slider-control-popover-background;
+        font-size: 11px;
+        border-radius: @border-radius-base;
+
+        span {
+          display: table-row;
+        }
+
+        &::before {
+          content: '';
+          position: absolute;
+          width: 0;
+          height: 0;
+          left: 0;
+          right: 0;
+          margin-left: auto;
+          margin-right: auto;
+          bottom: -4px;
+          border-left: 10px solid transparent; // lesshint variableValue: false
+          border-right: 10px solid transparent; // lesshint variableValue: false
+          border-top: 10px solid @slider-control-popover-background; // lesshint variableValue: false
+        }
+      }
+    }
+
+    .range,
+    .control {
+      transition: all 0.2s ease-out;
+    }
+  }
+}

src/less/variables.less

@@ -67,6 +67,7 @@
 @modal-z-index: 1100;
 @side-bar-z-index: 1200;
 @highlight-z-index: 1300;
+@slider-z-index: 2;
 
 /* @end Z indices */
 
@@ -131,6 +132,15 @@
 @table-hover: darken(@grey-lightest, 3%);
 @table-border: @border-base;
 
+@slider-bar-background: lighten(@grey-lighter, 8%);
+@slider-bar-thickness: 5px;
+@slider-range-color: @info;
+@slider-control-width: 15px;
+@slider-control-height: 15px;
+@slider-control-background: @info;
+@slider-control-border-radius: 20px;
+@slider-control-popover-background: lighten(@info, 25%);
+
 @content-box-background: @white;
 @content-box-header-background: @primary-lightest;
 @content-box-header-border: 1px solid @primary-lighter;

src/ts/components/forms/slider.examples.md

@@ -0,0 +1,34 @@
+#### Examples
+
+With initial values set and popover displayed:
+
+```js
+<Slider
+  displayPopover
+  onSlide={value => console.log(value)}
+  initialValue={{ from: 0, to: 700 }}
+  min={0}
+  max={1000}
+  step={10}
+/>
+```
+
+Without initial values and without popover displayed:
+
+```js
+<Slider onSlide={value => console.log(value)} min={-100} max={100} step={1} />
+```
+
+#### Less variables
+
+```less
+@slider-bar-background: lighten(@grey-lighter, 8%);
+@slider-bar-thickness: 5px;
+@slider-z-index: 2;
+@slider-range-color: @info;
+@slider-control-width: 15px;
+@slider-control-height: 15px;
+@slider-control-background: @info;
+@slider-control-border-radius: 20px;
+@slider-control-popover-background: lighten(@info, 25%);
+```