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

Commit a0dc6d8

Browse files
yeelan0319yeelan0319
committed
feat(slider): Implement discrete slider and discrete slider with marker
Closes #25
1 parent 307305c commit a0dc6d8

File tree

10 files changed

+700
-82
lines changed

10 files changed

+700
-82
lines changed

‎demos/slider.html

+165-64
Original file line numberDiff line numberDiff line change
@@ -88,13 +88,13 @@
8888
<section class="example"><em>Note that in browsers that support custom properties, we alter theme's primary
8989
color when using the dark theme toggle so that the slider appears more visible</em></section>
9090

91-
<section class="example">
91+
<section id="slider-example" class="example">
9292
<h2>Continuous Slider</h2>
93-
<div id="continuous-slider-example" class="slider-example">
93+
<div class="slider-example">
9494
<p id="example-cs-label">Select Value:</p>
9595

9696
<div class="example-slider-wrapper">
97-
<div class="mdc-slider" tabindex="0" role="slider"
97+
<div id="continuous-mdc-slider" class="mdc-slider" tabindex="0" role="slider"
9898
aria-valuemin="0" aria-valuemax="100" aria-valuenow="30"
9999
aria-labelledby="example-cs-label">
100100
<div class="mdc-slider__track-container">
@@ -109,56 +109,122 @@ <h2>Continuous Slider</h2>
109109
</div>
110110
</div>
111111

112-
<div>
113-
<label>
114-
Min: <input name="min" type="number" min="0" max="100" value="0">
115-
</label>
116-
</div>
117-
<div>
118-
<label>
119-
Max: <input name="max" type="number" min="0" max="100" value="100">
120-
</label>
121-
</div>
122-
<div>
123-
<label>
124-
Step: <input name="step" type="number" min="0" max="100" value="0">
125-
</label>
126-
</div>
127-
<div>
128-
<label>
129-
Dark Theme: <input type="checkbox" name="dark-theme">
130-
</label>
131-
</div>
132-
<div>
133-
<label>
134-
Disabled: <input type="checkbox" name="disabled">
135-
</label>
136-
</div>
137-
<div>
138-
<label>
139-
Use Custom BG Color: <input type="checkbox" name="use-custom-color">
140-
</label>
112+
<p>
113+
Value from <code>MDCSlider:input</code> event: <span id="continuous-slider-value">0</span>
114+
</p>
115+
<p>
116+
Value from <code>MDCSlider:change</code> event: <span id="continuous-slider-committed-value">0</span>
117+
</p>
118+
</div>
119+
120+
121+
<h2>Discrete Slider</h2>
122+
<div class="slider-example">
123+
<p id="example-ds-label">Select Value:</p>
124+
125+
<div class="example-slider-wrapper">
126+
<div id="discrete-mdc-slider" class="mdc-slider mdc-slider--discrete" tabindex="0" role="slider"
127+
aria-valuemin="0" aria-valuemax="100" aria-valuenow="30"
128+
aria-labelledby="example-ds-label">
129+
<div class="mdc-slider__track-container">
130+
<div class="mdc-slider__track"></div>
131+
</div>
132+
<div class="mdc-slider__thumb-container">
133+
<div class="mdc-slider__pin">
134+
<span class="mdc-slider__pin-value-marker">30</span>
135+
</div>
136+
<svg class="mdc-slider__thumb" width="21" height="21">
137+
<circle cx="10.5" cy="10.5" r="7.875"></circle>
138+
</svg>
139+
<div class="mdc-slider__focus-ring"></div>
140+
</div>
141+
</div>
141142
</div>
142-
<div>
143-
<label>
144-
RTL: <input type="checkbox" name="rtl">
145-
</label>
143+
144+
<p>
145+
Value from <code>MDCSlider:input</code> event: <span id="discrete-slider-value">0</span>
146+
</p>
147+
<p>
148+
Value from <code>MDCSlider:change</code> event: <span id="discrete-slider-committed-value">0</span>
149+
</p>
150+
</div>
151+
152+
<h2>Discrete Slider with markers</h2>
153+
<div class="slider-example">
154+
<p id="example-ds-marker-label">Select Value:</p>
155+
156+
<div class="example-slider-wrapper">
157+
<div id="discrete-mdc-slider-w-marker" class="mdc-slider mdc-slider--discrete mdc-slider--display-markers" tabindex="0" role="slider"
158+
aria-valuemin="0" aria-valuemax="100" aria-valuenow="30"
159+
aria-labelledby="example-ds-marker-label">
160+
<div class="mdc-slider__track-container">
161+
<div class="mdc-slider__track"></div>
162+
<div class="mdc-slider__track-marker-container">
163+
</div>
164+
</div>
165+
<div class="mdc-slider__thumb-container">
166+
<div class="mdc-slider__pin">
167+
<span class="mdc-slider__pin-value-marker">30</span>
168+
</div>
169+
<svg class="mdc-slider__thumb" width="21" height="21">
170+
<circle cx="10.5" cy="10.5" r="7.875"></circle>
171+
</svg>
172+
<div class="mdc-slider__focus-ring"></div>
173+
</div>
174+
</div>
146175
</div>
176+
147177
<p>
148-
Value from <code>MDCSlider:input</code> event: <span class="value">0</span>
178+
Value from <code>MDCSlider:input</code> event: <span id="discrete-slider-w-marker-value">0</span>
149179
</p>
150180
<p>
151-
Value from <code>MDCSlider:change</code> event: <span class="committed-value">0</span>
181+
Value from <code>MDCSlider:change</code> event: <span id="discrete-slider-w-marker-committed-value">0</span>
152182
</p>
153183
</div>
184+
185+
<div>
186+
<label>
187+
Min: <input name="min" type="number" min="0" max="100" value="0">
188+
</label>
189+
</div>
190+
<div>
191+
<label>
192+
Max: <input name="max" type="number" min="0" max="100" value="100">
193+
</label>
194+
</div>
195+
<div>
196+
<label>
197+
Step: <input name="step" type="number" min="0" max="100" value="0">
198+
</label>
199+
</div>
200+
<div>
201+
<label>
202+
Dark Theme: <input type="checkbox" name="dark-theme">
203+
</label>
204+
</div>
205+
<div>
206+
<label>
207+
Disabled: <input type="checkbox" name="disabled">
208+
</label>
209+
</div>
210+
<div>
211+
<label>
212+
Use Custom BG Color: <input type="checkbox" name="use-custom-color">
213+
</label>
214+
</div>
215+
<div>
216+
<label>
217+
RTL: <input type="checkbox" name="rtl">
218+
</label>
219+
</div>
154220
</section>
155221
</main>
156222
<script src="assets/material-components-web.js" charset="utf-8"></script>
157223
<script>
158224
(function() {
159225
setTimeout(function() {
160226
mdc.slider.MDCSlider.attachTo(document.getElementById('hero-slider'));
161-
initDemo(document.getElementById('continuous-slider-example'));
227+
initDemo(document.getElementById('slider-example'));
162228
}, 80);
163229

164230
function initDemo(demoRoot) {
@@ -169,55 +235,90 @@ <h2>Continuous Slider</h2>
169235
var disabled = demoRoot.querySelector('[name="disabled"]');
170236
var useCustomColor = demoRoot.querySelector('[name="use-custom-color"]');
171237
var rtl = demoRoot.querySelector('[name="rtl"]');
172-
var value = demoRoot.querySelector('.value');
173-
var committedValue = demoRoot.querySelector('.committed-value');
174-
var sliderEl = demoRoot.querySelector('.mdc-slider');
175-
var slider = new mdc.slider.MDCSlider(sliderEl);
176238

177-
slider.listen('MDCSlider:input', function() {
178-
value.textContent = slider.value;
239+
var continuousValue = demoRoot.querySelector('#continuous-slider-value');
240+
var continuousCommittedValue = demoRoot.querySelector('#continuous-slider-committed-value');
241+
var continuousSliderEl = demoRoot.querySelector('#continuous-mdc-slider');
242+
var continuousSlider = new mdc.slider.MDCSlider(continuousSliderEl);
243+
continuousSlider.listen('MDCSlider:input', function() {
244+
continuousValue.textContent = continuousSlider.value;
245+
});
246+
continuousSlider.listen('MDCSlider:change', function() {
247+
continuousCommittedValue.textContent = continuousSlider.value;
179248
});
180249

181-
slider.listen('MDCSlider:change', function() {
182-
committedValue.textContent = slider.value;
250+
var discreteValue = demoRoot.querySelector('#discrete-slider-value');
251+
var discreteCommittedValue = demoRoot.querySelector('#discrete-slider-committed-value');
252+
var discreteSliderEl = demoRoot.querySelector('#discrete-mdc-slider');
253+
var discreteSlider = new mdc.slider.MDCSlider(discreteSliderEl);
254+
discreteSlider.listen('MDCSlider:input', function() {
255+
discreteValue.textContent = discreteSlider.value;
256+
});
257+
discreteSlider.listen('MDCSlider:change', function() {
258+
discreteCommittedValue.textContent = discreteSlider.value;
259+
});
260+
261+
var discreteWMarkerValue = demoRoot.querySelector('#discrete-slider-w-marker-value');
262+
var discreteWMarkerCommittedValue = demoRoot.querySelector('#discrete-slider-w-marker-committed-value');
263+
var discreteWMarkerSliderEl = demoRoot.querySelector('#discrete-mdc-slider-w-marker');
264+
var discreteWMarkerSlider = new mdc.slider.MDCSlider(discreteWMarkerSliderEl);
265+
discreteWMarkerSlider.listen('MDCSlider:input', function() {
266+
discreteWMarkerValue.textContent = discreteWMarkerSlider.value;
267+
});
268+
discreteWMarkerSlider.listen('MDCSlider:change', function() {
269+
discreteWMarkerCommittedValue.textContent = discreteWMarkerSlider.value;
183270
});
184271

185272
min.addEventListener('input', function() {
186-
slider.min = parseFloat(min.value);
273+
continuousSlider.min = parseFloat(min.value);
274+
discreteSlider.min = parseFloat(min.value);
275+
discreteWMarkerSlider.min = parseFloat(min.value);
187276
});
188277

189278
max.addEventListener('input', function() {
190-
slider.max = parseFloat(max.value);
279+
continuousSlider.max = parseFloat(max.value);
280+
discreteSlider.max = parseFloat(max.value);
281+
discreteWMarkerSlider.max = parseFloat(max.value);
191282
});
192283

193284
step.addEventListener('input', function() {
194-
slider.step = parseFloat(step.value);
285+
continuousSlider.step = parseFloat(step.value);
286+
discreteSlider.step = parseFloat(step.value);
287+
discreteWMarkerSlider.step = parseFloat(step.value);
195288
});
196289

197290
darkTheme.addEventListener('change', function() {
198-
demoRoot
199-
.querySelector('.example-slider-wrapper')
200-
.classList[ darkTheme.checked ? 'add' : 'remove']('mdc-theme--dark');
291+
var examples = demoRoot.querySelectorAll('.example-slider-wrapper');
292+
examples.forEach((example) => {
293+
example.classList[ darkTheme.checked ? 'add' : 'remove']('mdc-theme--dark');
294+
});
201295
});
202296

203297
disabled.addEventListener('change', function() {
204-
slider.disabled = disabled.checked;
298+
continuousSlider.disabled = disabled.checked;
299+
discreteSlider.disabled = disabled.checked;
300+
discreteWMarkerSlider.disabled = disabled.checked;
205301
});
206302

207303
useCustomColor.addEventListener('change', function() {
208-
demoRoot
209-
.querySelector('.example-slider-wrapper')
210-
.classList[ useCustomColor.checked ? 'add' : 'remove' ]('custom-bg');
304+
var examples = demoRoot.querySelectorAll('.example-slider-wrapper');
305+
examples.forEach((example) => {
306+
example.classList[ useCustomColor.checked ? 'add' : 'remove' ]('custom-bg');
307+
});
211308
});
212309

213310
rtl.addEventListener('change', function() {
214-
var wrapper = demoRoot.querySelector('.example-slider-wrapper');
215-
if (rtl.checked) {
216-
wrapper.setAttribute('dir', 'rtl');
217-
} else {
218-
wrapper.removeAttribute('dir');
219-
}
220-
slider.layout();
311+
var examples = demoRoot.querySelectorAll('.example-slider-wrapper');
312+
examples.forEach((example) => {
313+
if (rtl.checked) {
314+
example.setAttribute('dir', 'rtl');
315+
} else {
316+
example.removeAttribute('dir');
317+
}
318+
});
319+
continuousSlider.layout();
320+
discreteSlider.layout();
321+
discreteWMarkerSlider.layout();
221322
});
222323
}
223324
})();

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@
8484
"stylelint-order": "^0.5.0",
8585
"stylelint-scss": "^1.4.1",
8686
"stylelint-selector-bem-pattern": "^1.0.0",
87-
"testdouble": "^3.0.0",
87+
"testdouble": "3.0.0",
8888
"to-slug-case": "^1.0.0",
8989
"validate-commit-msg": "^2.6.1",
9090
"webpack": "^2.2.1",

0 commit comments

Comments
 (0)