Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit 28024e9

Browse files
acdvorakacdvorak
authored
feat(slider): Add color theme mixins; default to secondary; remove --off (#1544)
BREAKING CHANGE: The `mdc-slider--off` modifier class has been removed as it is being removed from the spec. Resolves #1151
1 parent 8093ad1 commit 28024e9

File tree

10 files changed

+335
-253
lines changed

10 files changed

+335
-253
lines changed

‎demos/slider.html

+112-60
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@
3535

3636
.mdc-theme--dark {
3737
background-color: #333;
38-
--mdc-theme-primary: #64dd17;
3938
}
4039

4140
.custom-bg {
@@ -48,6 +47,23 @@
4847
--mdc-slider-bg-color-behind-component: #102027;
4948
}
5049

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+
5167
.example-slider-wrapper {
5268
padding: 0 16px;
5369
}
@@ -69,7 +85,7 @@
6985
<section class="hero">
7086
<div id="hero-slider-wrapper">
7187
<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"
7389
aria-label="Select Value">
7490
<div class="mdc-slider__track-container">
7591
<div class="mdc-slider__track"></div>
@@ -84,18 +100,13 @@
84100
</div>
85101
</section>
86102

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-
90103
<section id="slider-example" class="example">
91104
<h2>Continuous Slider</h2>
92105
<div class="slider-example">
93-
<p id="example-cs-label">Select Value:</p>
94-
95106
<div class="example-slider-wrapper">
96107
<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">
99110
<div class="mdc-slider__track-container">
100111
<div class="mdc-slider__track"></div>
101112
</div>
@@ -109,28 +120,25 @@ <h2>Continuous Slider</h2>
109120
</div>
110121

111122
<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>
116126
</p>
117127
</div>
118128

119129

120130
<h2>Discrete Slider</h2>
121131
<div class="slider-example">
122-
<p id="example-ds-label">Select Value:</p>
123-
124132
<div class="example-slider-wrapper">
125133
<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">
128136
<div class="mdc-slider__track-container">
129137
<div class="mdc-slider__track"></div>
130138
</div>
131139
<div class="mdc-slider__thumb-container">
132140
<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>
134142
</div>
135143
<svg class="mdc-slider__thumb" width="21" height="21">
136144
<circle cx="10.5" cy="10.5" r="7.875"></circle>
@@ -141,29 +149,26 @@ <h2>Discrete Slider</h2>
141149
</div>
142150

143151
<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>
148155
</p>
149156
</div>
150157

151-
<h2>Discrete Slider with markers</h2>
158+
<h2>Discrete Slider with Tick Marks</h2>
152159
<div class="slider-example">
153-
<p id="example-ds-marker-label">Select Value:</p>
154-
155160
<div class="example-slider-wrapper">
156161
<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">
159164
<div class="mdc-slider__track-container">
160165
<div class="mdc-slider__track"></div>
161166
<div class="mdc-slider__track-marker-container">
162167
</div>
163168
</div>
164169
<div class="mdc-slider__thumb-container">
165170
<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>
167172
</div>
168173
<svg class="mdc-slider__thumb" width="21" height="21">
169174
<circle cx="10.5" cy="10.5" r="7.875"></circle>
@@ -174,57 +179,88 @@ <h2>Discrete Slider with markers</h2>
174179
</div>
175180

176181
<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>
178185
</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+
179211
<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>
181215
</p>
182216
</div>
183217

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">
187222
</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">
192226
</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">
197230
</label>
198231
</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
202236
</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
207240
</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
212244
</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
217248
</label>
218249
</div>
219250
</section>
220251
</main>
221252
<script src="/assets/material-components-web.js"></script>
222253
<script>
223254
(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);
228264

229265
function initDemo(demoRoot) {
230266
var min = demoRoot.querySelector('[name="min"]');
@@ -268,22 +304,36 @@ <h2>Discrete Slider with markers</h2>
268304
discreteWMarkerCommittedValue.textContent = discreteWMarkerSlider.value;
269305
});
270306

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+
271318
min.addEventListener('input', function() {
272319
continuousSlider.min = parseFloat(min.value);
273320
discreteSlider.min = parseFloat(min.value);
274321
discreteWMarkerSlider.min = parseFloat(min.value);
322+
customDiscreteWMarkerSlider.min = parseFloat(min.value);
275323
});
276324

277325
max.addEventListener('input', function() {
278326
continuousSlider.max = parseFloat(max.value);
279327
discreteSlider.max = parseFloat(max.value);
280328
discreteWMarkerSlider.max = parseFloat(max.value);
329+
customDiscreteWMarkerSlider.max = parseFloat(max.value);
281330
});
282331

283332
step.addEventListener('input', function() {
284333
continuousSlider.step = parseFloat(step.value);
285334
discreteSlider.step = parseFloat(step.value);
286335
discreteWMarkerSlider.step = parseFloat(step.value);
336+
customDiscreteWMarkerSlider.step = parseFloat(step.value);
287337
});
288338

289339
darkTheme.addEventListener('change', function() {
@@ -296,6 +346,7 @@ <h2>Discrete Slider with markers</h2>
296346
continuousSlider.disabled = disabled.checked;
297347
discreteSlider.disabled = disabled.checked;
298348
discreteWMarkerSlider.disabled = disabled.checked;
349+
customDiscreteWMarkerSlider.disabled = disabled.checked;
299350
});
300351

301352
useCustomColor.addEventListener('change', function() {
@@ -315,6 +366,7 @@ <h2>Discrete Slider with markers</h2>
315366
continuousSlider.layout();
316367
discreteSlider.layout();
317368
discreteWMarkerSlider.layout();
369+
customDiscreteWMarkerSlider.layout();
318370
});
319371
}
320372
})();

‎demos/slider.scss

+14
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,17 @@
1717
@import "./common";
1818
@import "../packages/mdc-slider/mdc-slider";
1919
@import "../packages/mdc-typography/mdc-typography";
20+
@import "../packages/mdc-theme/color-palette";
21+
22+
.demo-slider--custom {
23+
@include mdc-slider-highlight-color($material-color-red-700);
24+
@include mdc-slider-rail-color($material-color-yellow-600, 1);
25+
@include mdc-slider-rail-tick-mark-color(white);
26+
@include mdc-slider-thumb-color($material-color-orange-500);
27+
@include mdc-slider-focus-halo-color($material-color-yellow-900);
28+
@include mdc-slider-value-pin-fill-color-accessible($material-color-pink-500);
29+
30+
@include mdc-theme-dark {
31+
@include mdc-slider-rail-tick-mark-color(black);
32+
}
33+
}

0 commit comments

Comments
 (0)