1 @import '../../style/_colors.scss';
2 $slider-background: rgba(19, 82, 150, 0.2);
3 $disabled-slider-background: $dark-gray;
4 //Generates ticks on bar. Not currently used
5 $slider-background-ticks: repeating-linear-gradient(to right, $slider-background, $slider-background 0%, #fff 0%, #fff 1%, $slider-background 1%, $slider-background 25%);
6 $thumb-color: rgba(0, 119, 200, 1);
7 $disabled-thumb-color: $dark-gray;
8 $track-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
12 $-webkit-handle-offset: ($track-height - $thumb-height) / 2;
17 box-shadow: $track-shadow;
18 border: 0px solid #000000;
19 background: $thumb-color;
20 box-shadow: 2px 2px 2px 0px #ccc;
21 height: $thumb-height + px;
27 height: $track-height + px;
33 justify-content: space-between;
38 -webkit-appearance: none;
39 margin: $input-margin + px 0;
44 &::-webkit-slider-thumb {
45 @include thumbStyling;
46 -webkit-appearance: none;
47 margin-top: $-webkit-handle-offset + px;
51 @include thumbStyling;
54 @include thumbStyling;
56 &::-webkit-slider-runnable-track {
58 box-shadow: $track-shadow;
59 background: $slider-background;
60 border: 0px solid #000101;
62 &:focus::-webkit-slider-runnable-track {
63 background: $slider-background;
67 box-shadow: $track-shadow;
68 background: $slider-background;
69 border: 0px solid #000101;
73 background: transparent;
74 border-color: transparent;
79 background: $slider-background;
80 border: 0px solid #000101;
81 box-shadow: $track-shadow;
85 border: 0px solid #000101;
86 box-shadow: $track-shadow;
88 &:focus::-ms-fill-lower {
89 background: $slider-background;
91 &:focus::-ms-fill-upper {
92 background: $slider-background;
102 border: 1px solid #ccc;
107 height:$thumb-height + px;
108 margin: $input-margin / 2 + px;
115 -webkit-appearance: none;
117 width: $track-height + px;
118 transform: rotate(270deg);
119 transform-origin: right;
120 &::-webkit-slider-thumb {
121 box-shadow: -2px 2px 2px 0px #ccc;
123 &::-moz-range-thumb {
124 box-shadow: -2px 2px 2px 0px #ccc;
127 box-shadow: -2px 2px 2px 0px #ccc;
134 transform: translateY(10px) rotate(90deg);
141 &::-webkit-slider-thumb {
142 background: $disabled-thumb-color;
144 &::-moz-range-thumb {
145 background: $disabled-thumb-color;
148 background: $disabled-thumb-color;
150 &::-webkit-slider-runnable-track {
151 background: $disabled-slider-background;
153 &:focus::-webkit-slider-runnable-track {
154 background: $disabled-slider-background;
156 &::-moz-range-track {
157 background: $disabled-slider-background;
162 background: $disabled-slider-background;
165 background: $disabled-slider-background;
167 &:focus::-ms-fill-lower {
168 background: $disabled-slider-background;
170 &:focus::-ms-fill-upper {
171 background: $disabled-slider-background;