35
35
36
36
.mdc-theme--dark {
37
37
background-color : # 333 ;
38
- --mdc-theme-primary : # 64dd17 ;
39
38
}
40
39
41
40
.custom-bg {
48
47
--mdc-slider-bg-color-behind-component : # 102027 ;
49
48
}
50
49
50
+ .slider-example {
51
+ margin-bottom : 48px ;
52
+ }
53
+
54
+ .demo-param-field-group + .demo-param-field-group {
55
+ margin-top : 16px ;
56
+ }
57
+
58
+ .demo-param-field {
59
+ display : block;
60
+ }
61
+
62
+ .demo-param-input-label {
63
+ display : inline-block;
64
+ min-width : 2.5em ;
65
+ }
66
+
51
67
.example-slider-wrapper {
52
68
padding : 0 16px ;
53
69
}
69
85
< section class ="hero ">
70
86
< div id ="hero-slider-wrapper ">
71
87
< div id ="hero-slider " class ="mdc-slider " tabindex ="0 "
72
- role ="slider " aria-valuemin ="0 " aria-valuemax ="100 " aria-valuenow ="30 "
88
+ role ="slider " aria-valuemin ="0 " aria-valuemax ="50 " aria-valuenow ="20 "
73
89
aria-label ="Select Value ">
74
90
< div class ="mdc-slider__track-container ">
75
91
< div class ="mdc-slider__track "> </ div >
84
100
</ div >
85
101
</ section >
86
102
87
- < section class ="example "> < em > Note that in browsers that support custom properties, we alter theme's primary
88
- color when using the dark theme toggle so that the slider appears more visible</ em > </ section >
89
-
90
103
< section id ="slider-example " class ="example ">
91
104
< h2 > Continuous Slider</ h2 >
92
105
< div class ="slider-example ">
93
- < p id ="example-cs-label "> Select Value:</ p >
94
-
95
106
< div class ="example-slider-wrapper ">
96
107
< div id ="continuous-mdc-slider " class ="mdc-slider " tabindex ="0 " role ="slider "
97
- aria-valuemin ="0 " aria-valuemax ="100 " aria-valuenow ="30 "
98
- aria-labelledby =" example-cs-label ">
108
+ aria-valuemin ="0 " aria-valuemax ="50 " aria-valuenow ="20 "
109
+ aria-label =" Select Value ">
99
110
< div class ="mdc-slider__track-container ">
100
111
< div class ="mdc-slider__track "> </ div >
101
112
</ div >
@@ -109,28 +120,25 @@ <h2>Continuous Slider</h2>
109
120
</ div >
110
121
111
122
< p >
112
- Value from < code > MDCSlider:input</ code > event: < span id ="continuous-slider-value "> 0</ span >
113
- </ p >
114
- < p >
115
- Value from < code > MDCSlider:change</ code > event: < span id ="continuous-slider-committed-value "> 0</ span >
123
+ Value from < code > MDCSlider:input</ code > event: < span id ="continuous-slider-value "> </ span >
124
+ < br >
125
+ Value from < code > MDCSlider:change</ code > event: < span id ="continuous-slider-committed-value "> </ span >
116
126
</ p >
117
127
</ div >
118
128
119
129
120
130
< h2 > Discrete Slider</ h2 >
121
131
< div class ="slider-example ">
122
- < p id ="example-ds-label "> Select Value:</ p >
123
-
124
132
< div class ="example-slider-wrapper ">
125
133
< div id ="discrete-mdc-slider " class ="mdc-slider mdc-slider--discrete " tabindex ="0 " role ="slider "
126
- aria-valuemin ="0 " aria-valuemax ="100 " aria-valuenow ="30 "
127
- aria-labelledby =" example-ds-label ">
134
+ aria-valuemin ="0 " aria-valuemax ="50 " aria-valuenow ="20 "
135
+ aria-label =" Select Value ">
128
136
< div class ="mdc-slider__track-container ">
129
137
< div class ="mdc-slider__track "> </ div >
130
138
</ div >
131
139
< div class ="mdc-slider__thumb-container ">
132
140
< div class ="mdc-slider__pin ">
133
- < span class ="mdc-slider__pin-value-marker "> 30 </ span >
141
+ < span class ="mdc-slider__pin-value-marker "> 20 </ span >
134
142
</ div >
135
143
< svg class ="mdc-slider__thumb " width ="21 " height ="21 ">
136
144
< circle cx ="10.5 " cy ="10.5 " r ="7.875 "> </ circle >
@@ -141,29 +149,26 @@ <h2>Discrete Slider</h2>
141
149
</ div >
142
150
143
151
< p >
144
- Value from < code > MDCSlider:input</ code > event: < span id ="discrete-slider-value "> 0</ span >
145
- </ p >
146
- < p >
147
- Value from < code > MDCSlider:change</ code > event: < span id ="discrete-slider-committed-value "> 0</ span >
152
+ Value from < code > MDCSlider:input</ code > event: < span id ="discrete-slider-value "> </ span >
153
+ < br >
154
+ Value from < code > MDCSlider:change</ code > event: < span id ="discrete-slider-committed-value "> </ span >
148
155
</ p >
149
156
</ div >
150
157
151
- < h2 > Discrete Slider with markers </ h2 >
158
+ < h2 > Discrete Slider with Tick Marks </ h2 >
152
159
< div class ="slider-example ">
153
- < p id ="example-ds-marker-label "> Select Value:</ p >
154
-
155
160
< div class ="example-slider-wrapper ">
156
161
< div id ="discrete-mdc-slider-w-marker " class ="mdc-slider mdc-slider--discrete mdc-slider--display-markers " tabindex ="0 " role ="slider "
157
- aria-valuemin ="0 " aria-valuemax ="100 " aria-valuenow ="30 "
158
- aria-labelledby =" example-ds-marker-label ">
162
+ aria-valuemin ="0 " aria-valuemax ="50 " aria-valuenow ="20 "
163
+ aria-label =" Select Value ">
159
164
< div class ="mdc-slider__track-container ">
160
165
< div class ="mdc-slider__track "> </ div >
161
166
< div class ="mdc-slider__track-marker-container ">
162
167
</ div >
163
168
</ div >
164
169
< div class ="mdc-slider__thumb-container ">
165
170
< div class ="mdc-slider__pin ">
166
- < span class ="mdc-slider__pin-value-marker "> 30 </ span >
171
+ < span class ="mdc-slider__pin-value-marker "> 20 </ span >
167
172
</ div >
168
173
< svg class ="mdc-slider__thumb " width ="21 " height ="21 ">
169
174
< circle cx ="10.5 " cy ="10.5 " r ="7.875 "> </ circle >
@@ -174,57 +179,88 @@ <h2>Discrete Slider with markers</h2>
174
179
</ div >
175
180
176
181
< p >
177
- Value from < code > MDCSlider:input</ code > event: < span id ="discrete-slider-w-marker-value "> 0</ span >
182
+ Value from < code > MDCSlider:input</ code > event: < span id ="discrete-slider-w-marker-value "> </ span >
183
+ < br >
184
+ Value from < code > MDCSlider:change</ code > event: < span id ="discrete-slider-w-marker-committed-value "> </ span >
178
185
</ p >
186
+ </ div >
187
+
188
+ < h2 > Custom Colored Discrete Slider with Tick Marks</ h2 >
189
+ < div class ="slider-example ">
190
+ < div class ="example-slider-wrapper ">
191
+ < div id ="custom-discrete-mdc-slider-w-marker " class ="mdc-slider mdc-slider--discrete mdc-slider--display-markers demo-slider--custom " tabindex ="0 " role ="slider "
192
+ aria-valuemin ="0 " aria-valuemax ="50 " aria-valuenow ="20 "
193
+ aria-label ="Select Value ">
194
+ < div class ="mdc-slider__track-container ">
195
+ < div class ="mdc-slider__track "> </ div >
196
+ < div class ="mdc-slider__track-marker-container ">
197
+ </ div >
198
+ </ div >
199
+ < div class ="mdc-slider__thumb-container ">
200
+ < div class ="mdc-slider__pin ">
201
+ < span class ="mdc-slider__pin-value-marker "> 20</ span >
202
+ </ div >
203
+ < svg class ="mdc-slider__thumb " width ="21 " height ="21 ">
204
+ < circle cx ="10.5 " cy ="10.5 " r ="7.875 "> </ circle >
205
+ </ svg >
206
+ < div class ="mdc-slider__focus-ring "> </ div >
207
+ </ div >
208
+ </ div >
209
+ </ div >
210
+
179
211
< p >
180
- Value from < code > MDCSlider:change</ code > event: < span id ="discrete-slider-w-marker-committed-value "> 0</ span >
212
+ Value from < code > MDCSlider:input</ code > event: < span id ="custom-discrete-slider-w-marker-value "> </ span >
213
+ < br >
214
+ Value from < code > MDCSlider:change</ code > event: < span id ="custom-discrete-slider-w-marker-committed-value "> </ span >
181
215
</ p >
182
216
</ div >
183
217
184
- < div >
185
- < label >
186
- Min: < input name ="min " type ="number " min ="0 " max ="100 " value ="0 ">
218
+ < div class ="demo-param-field-group ">
219
+ < label class ="demo-param-field ">
220
+ < span class ="demo-param-input-label "> Min:</ span >
221
+ < input name ="min " type ="number " min ="0 " max ="100 " value ="0 ">
187
222
</ label >
188
- </ div >
189
- < div >
190
- < label >
191
- Max: < input name ="max " type ="number " min ="0 " max ="100 " value ="100 ">
223
+ < label class ="demo-param-field ">
224
+ < div class ="demo-param-input-label "> Max:</ div >
225
+ < input name ="max " type ="number " min ="0 " max ="100 " value ="50 ">
192
226
</ label >
193
- </ div >
194
- < div >
195
- < label >
196
- Step: < input name ="step " type ="number " min ="0 " max ="100 " value ="0 ">
227
+ < label class ="demo-param-field ">
228
+ < span class ="demo-param-input-label "> Step:</ span >
229
+ < input name ="step " type ="number " min ="0 " max ="100 " value ="0 ">
197
230
</ label >
198
231
</ div >
199
- < div >
200
- < label >
201
- Dark Theme: < input type ="checkbox " name ="dark-theme ">
232
+ < div class ="demo-param-field-group ">
233
+ < label class ="demo-param-field ">
234
+ < input type ="checkbox " name ="disabled ">
235
+ Disabled
202
236
</ label >
203
- </ div >
204
- < div >
205
- < label >
206
- Disabled: < input type ="checkbox " name ="disabled ">
237
+ < label class ="demo-param-field ">
238
+ < input type ="checkbox " name ="dark-theme ">
239
+ Dark Theme
207
240
</ label >
208
- </ div >
209
- < div >
210
- < label >
211
- Use Custom BG Color: < input type ="checkbox " name ="use-custom-color ">
241
+ < label class ="demo-param-field ">
242
+ < input type ="checkbox " name ="use-custom-color ">
243
+ Use Custom BG Color
212
244
</ label >
213
- </ div >
214
- < div >
215
- < label >
216
- RTL: < input type ="checkbox " name ="rtl ">
245
+ < label class ="demo-param-field ">
246
+ < input type ="checkbox " name ="rtl ">
247
+ RTL
217
248
</ label >
218
249
</ div >
219
250
</ section >
220
251
</ main >
221
252
< script src ="/assets/material-components-web.js "> </ script >
222
253
< script >
223
254
( function ( ) {
224
- setTimeout ( function ( ) {
225
- mdc . slider . MDCSlider . attachTo ( document . getElementById ( 'hero-slider' ) ) ;
226
- initDemo ( document . getElementById ( 'slider-example' ) ) ;
227
- } , 80 ) ;
255
+ // Wait for Webpack to load CSS. Otherwise, size/position calculations will be incorrect.
256
+ var interval = setInterval ( function ( ) {
257
+ const element = document . getElementById ( 'hero-slider' ) ;
258
+ if ( getComputedStyle ( element ) . position === 'relative' ) {
259
+ clearInterval ( interval ) ;
260
+ mdc . slider . MDCSlider . attachTo ( element ) ;
261
+ initDemo ( document . getElementById ( 'slider-example' ) ) ;
262
+ }
263
+ } , 100 ) ;
228
264
229
265
function initDemo ( demoRoot ) {
230
266
var min = demoRoot . querySelector ( '[name="min"]' ) ;
@@ -268,22 +304,36 @@ <h2>Discrete Slider with markers</h2>
268
304
discreteWMarkerCommittedValue . textContent = discreteWMarkerSlider . value ;
269
305
} ) ;
270
306
307
+ var customDiscreteWMarkerValue = demoRoot . querySelector ( '#custom-discrete-slider-w-marker-value' ) ;
308
+ var customDiscreteWMarkerCommittedValue = demoRoot . querySelector ( '#custom-discrete-slider-w-marker-committed-value' ) ;
309
+ var customDiscreteWMarkerSliderEl = demoRoot . querySelector ( '#custom-discrete-mdc-slider-w-marker' ) ;
310
+ var customDiscreteWMarkerSlider = new mdc . slider . MDCSlider ( customDiscreteWMarkerSliderEl ) ;
311
+ customDiscreteWMarkerSlider . listen ( 'MDCSlider:input' , function ( ) {
312
+ customDiscreteWMarkerValue . textContent = customDiscreteWMarkerSlider . value ;
313
+ } ) ;
314
+ customDiscreteWMarkerSlider . listen ( 'MDCSlider:change' , function ( ) {
315
+ customDiscreteWMarkerCommittedValue . textContent = customDiscreteWMarkerSlider . value ;
316
+ } ) ;
317
+
271
318
min . addEventListener ( 'input' , function ( ) {
272
319
continuousSlider . min = parseFloat ( min . value ) ;
273
320
discreteSlider . min = parseFloat ( min . value ) ;
274
321
discreteWMarkerSlider . min = parseFloat ( min . value ) ;
322
+ customDiscreteWMarkerSlider . min = parseFloat ( min . value ) ;
275
323
} ) ;
276
324
277
325
max . addEventListener ( 'input' , function ( ) {
278
326
continuousSlider . max = parseFloat ( max . value ) ;
279
327
discreteSlider . max = parseFloat ( max . value ) ;
280
328
discreteWMarkerSlider . max = parseFloat ( max . value ) ;
329
+ customDiscreteWMarkerSlider . max = parseFloat ( max . value ) ;
281
330
} ) ;
282
331
283
332
step . addEventListener ( 'input' , function ( ) {
284
333
continuousSlider . step = parseFloat ( step . value ) ;
285
334
discreteSlider . step = parseFloat ( step . value ) ;
286
335
discreteWMarkerSlider . step = parseFloat ( step . value ) ;
336
+ customDiscreteWMarkerSlider . step = parseFloat ( step . value ) ;
287
337
} ) ;
288
338
289
339
darkTheme . addEventListener ( 'change' , function ( ) {
@@ -296,6 +346,7 @@ <h2>Discrete Slider with markers</h2>
296
346
continuousSlider . disabled = disabled . checked ;
297
347
discreteSlider . disabled = disabled . checked ;
298
348
discreteWMarkerSlider . disabled = disabled . checked ;
349
+ customDiscreteWMarkerSlider . disabled = disabled . checked ;
299
350
} ) ;
300
351
301
352
useCustomColor . addEventListener ( 'change' , function ( ) {
@@ -315,6 +366,7 @@ <h2>Discrete Slider with markers</h2>
315
366
continuousSlider . layout ( ) ;
316
367
discreteSlider . layout ( ) ;
317
368
discreteWMarkerSlider . layout ( ) ;
369
+ customDiscreteWMarkerSlider . layout ( ) ;
318
370
} ) ;
319
371
}
320
372
} ) ( ) ;
0 commit comments