diff --git a/components/Forms/InputRange/InputRange.css b/components/Forms/InputRange/InputRange.css index 4657283ed..7a4744167 100644 --- a/components/Forms/InputRange/InputRange.css +++ b/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 { diff --git a/components/Forms/InputRange/InputRange.js b/components/Forms/InputRange/InputRange.js index f2e290b8c..d1ed974a9 100644 --- a/components/Forms/InputRange/InputRange.js +++ b/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, diff --git a/package.json b/package.json index d281fc38d..0d7547a18 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 25c61be25..5246cbb1b 100644 --- a/yarn.lock +++ b/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"