Update slider styles

- Add active classname for styling when the input method is touch
- Restyle the slider bar + histogram elements

components/Forms/InputRange/InputRange.css

@@ -28,10 +28,9 @@
   position: absolute;
 }
 
-.slider:active {
+.sliderActive {
   transform: scale(1.1);
   box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
-  background-color: var(--color-greyLightest);
 }
 
 .slider:focus {
@@ -43,14 +42,13 @@
   cursor: pointer;
   display: block;
   height: var(--inputRange-track-height);
-  border-radius: calc(var(--inputRange-track-height) / 2);
   position: absolute;
   width: 100%;
   left: 0;
 }
 
 .trackContainer {
-  background: var(--color-greyLightest);
+  background: var(--color-greyLighter);
 }
 
 .trackActive {
@@ -76,17 +74,14 @@
 
 .barContainer {
   display: inline-block;
-  padding-left: 1px;
-  padding-right: 1px;
   vertical-align: bottom;
+  transform: translateY(1px);
 }
 
 .bar {
   width: 100%;
   height: 100%;
-  background-color: var(--color-greyLighter);
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
+  background-color: var(--color-greyLight);
 }
 
 .inputRange {

components/Forms/InputRange/InputRange.js

@@ -11,6 +11,7 @@ export const defaultClassNames = {
   labelMin: css.labelMin,
   labelValue: css.labelValue,
   slider: css.slider,
+  sliderActive: css.sliderActive,
   sliderContainer: css.sliderContainer,
   trackActive: css.trackActive,
   trackContainer: css.trackContainer,

package.json

@@ -91,7 +91,7 @@
   },
   "dependencies": {
     "@appearhere/nuka-carousel": "^2.1.6",
-    "@appearhere/react-input-range": "^1.0.0",
+    "@appearhere/react-input-range": "^1.1.0",
     "array-from": "^2.1.1",
     "babel-polyfill": "^6.22.0",
     "classnames": "^2.2.5",

yarn.lock

@@ -10,9 +10,9 @@
     kw-react-tween-state "^0.1.5"
     object-assign "^4.1.0"
 
-"@appearhere/react-input-range@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@appearhere/react-input-range/-/react-input-range-1.0.0.tgz#c4cf748211de55e9602053e414e63744315b612c"
+"@appearhere/react-input-range@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@appearhere/react-input-range/-/react-input-range-1.1.0.tgz#251ec7589742cd238ce645fd48ffd116a6306774"
 
 "@kadira/react-split-pane@^1.4.0":
   version "1.4.7"