1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
// Colors based on Chromium engine
// (every browser renders its input range on its own, here we are trying
// to add some consistency)
$range-bg-color: $gray-175
$range-border-color: $gray-400
$range-bg-progress-color: $secondary
$range-height: 8px
$range-radius: 3px
$knob-size: 14px
.range-control
display: inline-flex
flex-direction: column
vertical-align: top
&__label
font-size: 14px
color: $gray-700
margin-bottom: space-x(0.5)
// enhance hover area of ".range-slider" placeholder
// (cf ".range-slider")
&:hover .range-slider .range-slider__placeholder
display: block
///////////////////////////////////////////////
.range-slider
$self: &
$placeholder-offset-y: -32px
position: relative
width: 100%
height: $range-height
&__scale
position: absolute
width: inherit
height: inherit
background-color: $range-bg-color
border: 1px solid $range-border-color
border-radius: $range-radius
&__scale-sel
position: absolute
background-color: $range-bg-progress-color
width: inherit
height: inherit
border-radius: $range-radius
border: 1px solid $range-border-color
&__knob
@include unselectable
@include clickable
z-index: 1
background-color: $range-bg-progress-color
width: $knob-size
height: $knob-size
border-radius: 50%
position: absolute
box-shadow: 0 0 1px 0 $range-bg-progress-color
// alignement with the bar
transform: translateX(-5px) translateY(-3px)
&.disabled
cursor: not-allowed
&:hover
background-color: darken($range-bg-progress-color, 15%)
&__placeholder
display: none
background-color: $black
color: $white
position: absolute
padding: space-x(0.5) space-x(1)
text-align: center
font-size: 14px
font-weight: bold
border-radius: 5px
box-shadow: 0 0 1px 0 $black
opacity: 0.8
transform: translateX(-25%) translateY($placeholder-offset-y)
&:hover &
&__placeholder
display: block
////////////////////////////////////////////
.range-simple
display: inline-flex
flex-direction: column
vertical-align: top
position: relative
&__label
font-size: 14px
color: $gray-700
&__field
position: relative
& input[disabled]
cursor: not-allowed
////////////////////////////////////////////
// Cross browser rules
//
// (?) Range consistency issue between browsers UI engine: mostly rely on
// Chromium UI and adapt it to other engine
//
// Some examples:
// @link https://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html
input[type=range]
@include clickable
width: 100%
// Styling FireFox input range, mimicking Chromium one
//
// (?) * unable to differenciate selector betwenn background range and progress
// one → set only background range
// * unable to position the input ideally → have to rely on
// absolute + position
input[type=range]
-webkit-appearance: none
input[type=range]::-webkit-slider-runnable-track
$chromium-offset-y: 4px
height: $range-height
border-radius: $range-radius
border: 1px solid $range-border-color
background: $range-bg-color
width: 100%
position: absolute
top: $chromium-offset-y
input[type=range]::-webkit-slider-thumb
$chromium-offset-y: -4px
-webkit-appearance: none
transform: translateY($chromium-offset-y)
border: none
height: $knob-size
width: $knob-size
border-radius: 50%
background-color: $range-bg-progress-color
box-shadow: 0 0 1px 0 $range-bg-progress-color
// Styling FireFox input range, mimicking Chromium one
//
// (?) * unable to differenciate selector betwenn background range and progress
// one → set only background range
// * unable to position the input ideally → have to rely on
// translation
input[type=range]::-moz-range-track
$firefox-height: #{ $range-height - 2px }
$firefox-offset-y: -2px
height: $firefox-height
border-radius: $range-radius
border: 1px solid $range-border-color
background: $range-bg-color
transform: translateY($firefox-offset-y)
input[type=range]::-moz-range-thumb
$firefox-offset-y: -2px
border: none
height: $knob-size
width: $knob-size
border-radius: 50%
background-color: $range-bg-progress-color
box-shadow: 0 0 2px 0 $range-bg-progress-color
transform: translateY($firefox-offset-y)
// hide the outline behind the border
input[type=range]:-moz-focusring
outline: 1px solid white
outline-offset: -1px