fancy range slider styles

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

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';

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;
+}