1 /*! =======================================================
3 ========================================================= */
4 /*! =========================================================
12 * - Twitter: @Rovolutionary
13 * - Github: rovolution
15 * =========================================================
17 * bootstrap-slider is released under the MIT License
18 * Copyright (c) 2019 Kyle Kemp, Rohit Kalkur, and contributors
20 * Permission is hereby granted, free of charge, to any person
21 * obtaining a copy of this software and associated documentation
22 * files (the "Software"), to deal in the Software without
23 * restriction, including without limitation the rights to use,
24 * copy, modify, merge, publish, distribute, sublicense, and/or sell
25 * copies of the Software, and to permit persons to whom the
26 * Software is furnished to do so, subject to the following
29 * The above copyright notice and this permission notice shall be
30 * included in all copies or substantial portions of the Software.
32 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
33 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
34 * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
35 * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
36 * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
37 * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
38 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
39 * OTHER DEALINGS IN THE SOFTWARE.
41 * ========================================================= */
43 display: inline-block;
44 vertical-align: middle;
47 .slider.slider-horizontal {
51 .slider.slider-horizontal .slider-track {
58 .slider.slider-horizontal .slider-selection,
59 .slider.slider-horizontal .slider-track-low,
60 .slider.slider-horizontal .slider-track-high {
65 .slider.slider-horizontal .slider-tick,
66 .slider.slider-horizontal .slider-handle {
69 .slider.slider-horizontal .slider-tick.triangle,
70 .slider.slider-horizontal .slider-handle.triangle {
73 -ms-transform: translateY(-50%);
74 transform: translateY(-50%);
75 border-width: 0 10px 10px 10px;
78 border-bottom-color: #2e6da4;
81 .slider.slider-horizontal .slider-tick-container {
88 .slider.slider-horizontal .slider-tick-label-container {
92 .slider.slider-horizontal .slider-tick-label-container .slider-tick-label {
94 display: inline-block;
97 .slider.slider-horizontal .tooltip {
98 -ms-transform: translateX(-50%);
99 transform: translateX(-50%);
101 .slider.slider-horizontal.slider-rtl .slider-track {
105 .slider.slider-horizontal.slider-rtl .slider-tick,
106 .slider.slider-horizontal.slider-rtl .slider-handle {
107 margin-left: initial;
110 .slider.slider-horizontal.slider-rtl .slider-tick-container {
114 .slider.slider-horizontal.slider-rtl .tooltip {
115 -ms-transform: translateX(50%);
116 transform: translateX(50%);
118 .slider.slider-vertical {
122 .slider.slider-vertical .slider-track {
128 .slider.slider-vertical .slider-selection {
134 .slider.slider-vertical .slider-track-low,
135 .slider.slider-vertical .slider-track-high {
140 .slider.slider-vertical .slider-tick,
141 .slider.slider-vertical .slider-handle {
144 .slider.slider-vertical .slider-tick.triangle,
145 .slider.slider-vertical .slider-handle.triangle {
146 border-width: 10px 0 10px 10px;
149 border-left-color: #2e6da4;
150 border-right-color: #2e6da4;
154 .slider.slider-vertical .slider-tick-label-container {
157 .slider.slider-vertical .slider-tick-label-container .slider-tick-label {
160 .slider.slider-vertical .tooltip {
161 -ms-transform: translateY(-50%);
162 transform: translateY(-50%);
164 .slider.slider-vertical.slider-rtl .slider-track {
168 .slider.slider-vertical.slider-rtl .slider-selection {
172 .slider.slider-vertical.slider-rtl .slider-tick.triangle,
173 .slider.slider-vertical.slider-rtl .slider-handle.triangle {
174 border-width: 10px 10px 10px 0;
176 .slider.slider-vertical.slider-rtl .slider-tick-label-container .slider-tick-label {
177 padding-left: initial;
180 .slider.slider-disabled .slider-handle {
181 background-image: -webkit-linear-gradient(top, #dfdfdf 0%, #bebebe 100%);
182 background-image: -o-linear-gradient(top, #dfdfdf 0%, #bebebe 100%);
183 background-image: linear-gradient(to bottom, #dfdfdf 0%, #bebebe 100%);
184 background-repeat: repeat-x;
185 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdfdfdf', endColorstr='#ffbebebe', GradientType=0);
187 .slider.slider-disabled .slider-track {
188 background-image: -webkit-linear-gradient(top, #e5e5e5 0%, #e9e9e9 100%);
189 background-image: -o-linear-gradient(top, #e5e5e5 0%, #e9e9e9 100%);
190 background-image: linear-gradient(to bottom, #e5e5e5 0%, #e9e9e9 100%);
191 background-repeat: repeat-x;
192 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe5e5e5', endColorstr='#ffe9e9e9', GradientType=0);
199 pointer-events: none;
201 .slider .tooltip.top {
204 .slider .tooltip-inner {
214 background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #f9f9f9 100%);
215 background-image: -o-linear-gradient(top, #f5f5f5 0%, #f9f9f9 100%);
216 background-image: linear-gradient(to bottom, #f5f5f5 0%, #f9f9f9 100%);
217 background-repeat: repeat-x;
218 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);
219 -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
220 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
225 background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
226 background-image: -o-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
227 background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%);
228 background-repeat: repeat-x;
229 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0);
230 -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
231 box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
232 -webkit-box-sizing: border-box;
233 -moz-box-sizing: border-box;
234 box-sizing: border-box;
237 .slider-selection.tick-slider-selection {
238 background-image: -webkit-linear-gradient(top, #8ac1ef 0%, #82b3de 100%);
239 background-image: -o-linear-gradient(top, #8ac1ef 0%, #82b3de 100%);
240 background-image: linear-gradient(to bottom, #8ac1ef 0%, #82b3de 100%);
241 background-repeat: repeat-x;
242 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8ac1ef', endColorstr='#ff82b3de', GradientType=0);
247 background: transparent;
248 -webkit-box-sizing: border-box;
249 -moz-box-sizing: border-box;
250 box-sizing: border-box;
258 background-color: #337ab7;
259 background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
260 background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
261 background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
262 background-repeat: repeat-x;
263 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
265 -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
266 box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
267 border: 0px solid transparent;
269 .slider-handle:hover {
272 .slider-handle.round {
275 .slider-handle.triangle {
276 background: transparent none;
278 .slider-handle.custom {
279 background: transparent none;
281 .slider-handle.custom::before {
292 background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
293 background-image: -o-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
294 background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%);
295 background-repeat: repeat-x;
296 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0);
297 -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
298 box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
299 -webkit-box-sizing: border-box;
300 -moz-box-sizing: border-box;
301 box-sizing: border-box;
304 border: 0px solid transparent;
309 .slider-tick.triangle {
310 background: transparent none;
312 .slider-tick.custom {
313 background: transparent none;
315 .slider-tick.custom::before {
321 .slider-tick.in-selection {
322 background-image: -webkit-linear-gradient(top, #8ac1ef 0%, #82b3de 100%);
323 background-image: -o-linear-gradient(top, #8ac1ef 0%, #82b3de 100%);
324 background-image: linear-gradient(to bottom, #8ac1ef 0%, #82b3de 100%);
325 background-repeat: repeat-x;
326 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8ac1ef', endColorstr='#ff82b3de', GradientType=0);