From 3854cbaba048bf1405eaf180dc889d980dfb3db9 Mon Sep 17 00:00:00 2001 From: Andrew Suzuki Date: Mon, 6 Jun 2016 10:44:23 -0400 Subject: [PATCH] fancy range slider styles --- src/cljs/ulysses/components/basic.cljs | 3 +- src/sass/app.scss | 1 + src/sass/components/_range-slider.scss | 88 ++++++++++++++++++++++++++ 3 files changed, 91 insertions(+), 1 deletion(-) create mode 100644 src/sass/components/_range-slider.scss diff --git a/src/cljs/ulysses/components/basic.cljs b/src/cljs/ulysses/components/basic.cljs index 7a566e9..0452a53 100644 --- a/src/cljs/ulysses/components/basic.cljs +++ b/src/cljs/ulysses/components/basic.cljs @@ -106,7 +106,8 @@ (defn range-slider [& {:keys [min max value on-change]}] - [:input {:type :range + [:input {:class :range-slider + :type :range :min min :max max :value value diff --git a/src/sass/app.scss b/src/sass/app.scss index e81bd22..3c0bf18 100644 --- a/src/sass/app.scss +++ b/src/sass/app.scss @@ -62,5 +62,6 @@ @import 'components/not-found'; @import 'components/center-message'; @import 'components/progress'; +@import 'components/range-slider'; @import 'components/uconn-banner'; @import 'components/word-cloud'; diff --git a/src/sass/components/_range-slider.scss b/src/sass/components/_range-slider.scss new file mode 100644 index 0000000..786ad4c --- /dev/null +++ b/src/sass/components/_range-slider.scss @@ -0,0 +1,88 @@ +.range-slider { + -webkit-appearance: none; + background: $gray-lighter; + width: 100%; +} + +.range-slider:focus { + outline: none; +} + +.range-slider::-webkit-slider-runnable-track { + // animate: .2s; + background: $white; + border-radius: 11px; + cursor: pointer; + height: 22px; + width: 100%; +} + +.range-slider::-webkit-slider-thumb { + -webkit-appearance: none; + // border: 0; + // box-shadow: none; + background: $brand-primary; + border-radius: 9px; + cursor: pointer; + height: 18px; + margin-top: 2px; + width: 18px; +} + +.range-slider:focus::-webkit-slider-runnable-track { + background: $white; +} + +.range-slider::-moz-range-track { + // animate: .2s; + background: $white; + border-radius: 11px; + cursor: pointer; + height: 22px; + width: 100%; +} + +.range-slider::-moz-range-thumb { + background: $brand-primary; + border-radius: 9px; + cursor: pointer; + height: 18px; + width: 18px; +} + +.range-slider::-ms-track { + // animate: .2s; + background: transparent; + border-color: transparent; + color: transparent; + cursor: pointer; + height: 22px; + width: 100%; +} + +.range-slider::-ms-fill-lower { + background: $white; + border-radius: 22px; +} + +.range-slider::-ms-fill-upper { + background: $white; + border: 0; + border-radius: 22px; +} + +.range-slider::-ms-thumb { + background: $brand-primary; + border-radius: 9px; + cursor: pointer; + height: 18px; + width: 18px; +} + +.range-slider:focus::-ms-fill-lower { + background: $white; +} + +.range-slider:focus::-ms-fill-upper { + background: $white; +}