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

Commit a9d46ab

Browse files
traviskaufmantraviskaufman
authored
feat(slider): Implement continuous slider component (#781)
- Add continuous slider component - Check in `package-lock.json`, part of npm5/node8 - Disable stylelint for `demos.css` Part of #25
1 parent ef44d3d commit a9d46ab

23 files changed

+11908
-0
lines changed

‎.gitattributes

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
demos/* linguist-documentation
22
docs/* linguist-documentation
33
framework-examples/* linguist-documentation
4+
/package-lock.json linguist-generated

‎demos/images/slider.svg

+1
Loading

‎demos/index.html

+8
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,14 @@
183183
</a>
184184
</li>
185185

186+
<li class="mdc-list-item">
187+
<span class="catalog-list-icon mdc-list-item__start-detail"><img class="catalog-component-icon" src="/images/slider.svg" /></span>
188+
<a href="slider.html" class="mdc-list-item__text">
189+
Slider
190+
<span class="mdc-list-item__text__secondary">Range Controls</span>
191+
</a>
192+
</li>
193+
186194
<li class="mdc-list-item">
187195
<span class="catalog-list-icon mdc-list-item__start-detail"><img class="catalog-component-icon" src="/images/ic_toast_24px.svg" /></span>
188196
<a href="snackbar.html" class="mdc-list-item__text">

‎demos/slider.html

+225
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
<!DOCTYPE html>
2+
<!--
3+
Copyright 2017 Google Inc. All rights reserved.
4+
5+
Licensed under the Apache License, Version 2.0 (the "License");
6+
you may not use this file except in compliance with the License.
7+
You may obtain a copy of the License at
8+
9+
https://www.apache.org/licenses/LICENSE-2.0
10+
11+
Unless required by applicable law or agreed to in writing, software
12+
distributed under the License is distributed on an "AS IS" BASIS,
13+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
See the License for the specific language governing permissions and
15+
limitations under the License
16+
-->
17+
<html>
18+
<head>
19+
<meta charset="utf-8">
20+
<title>Slider - Material Components Catalog</title>
21+
<meta name="viewport" content="width=device-width, initial-scale=1">
22+
<link rel="icon" type="image/png" href="/images/logo_components_color_2x_web_48dp.png" />
23+
<script src="assets/material-components-web.css.js" charset="utf-8"></script>
24+
<script src="assets/demo-styles.css.js" charset="utf-8"></script>
25+
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
26+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
27+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
28+
<style>
29+
#hero-slider-wrapper {
30+
margin: 0 auto;
31+
width: 100%;
32+
max-width: 600px;
33+
/* Blended equivalent of rgba(0, 0, 0, .05); */
34+
--mdc-slider-bg-color-behind-component: #f2f2f2;
35+
}
36+
37+
.mdc-theme--dark {
38+
background-color: #333;
39+
--mdc-theme-primary: #64dd17;
40+
}
41+
42+
.custom-bg {
43+
background-color: #eee;
44+
--mdc-slider-bg-color-behind-component: #eee;
45+
}
46+
47+
.mdc-theme--dark.custom-bg {
48+
background-color: #102027;
49+
--mdc-slider-bg-color-behind-component: #102027;
50+
}
51+
52+
.example-slider-wrapper {
53+
padding: 0 16px;
54+
}
55+
</style>
56+
</head>
57+
<body class="mdc-typography">
58+
<header class="mdc-toolbar mdc-toolbar--fixed">
59+
<div class="mdc-toolbar__row">
60+
<section class="mdc-toolbar__section mdc-toolbar__section--align-start">
61+
<span class="catalog-back">
62+
<a href="/" class="mdc-toolbar__icon--menu"><i class="material-icons">&#xE5C4;</i></a>
63+
</span>
64+
<span class="mdc-toolbar__title catalog-title">Slider</span>
65+
</section>
66+
</div>
67+
</header>
68+
<main>
69+
<div class="mdc-toolbar-fixed-adjust"></div>
70+
<section class="hero">
71+
<div id="hero-slider-wrapper">
72+
<div id="hero-slider" class="mdc-slider" tabindex="0"
73+
role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="30"
74+
aria-label="Select Value">
75+
<div class="mdc-slider__track-container">
76+
<div class="mdc-slider__track"></div>
77+
</div>
78+
<div class="mdc-slider__thumb-container">
79+
<svg class="mdc-slider__thumb" width="21" height="21">
80+
<circle cx="10.5" cy="10.5" r="7.875"></circle>
81+
</svg>
82+
<div class="mdc-slider__focus-ring"></div>
83+
</div>
84+
</div>
85+
</div>
86+
</section>
87+
88+
<section class="example"><em>Note that in browsers that support custom properties, we alter theme's primary
89+
color when using the dark theme toggle so that the slider appears more visible</em></section>
90+
91+
<section class="example">
92+
<h2>Continuous Slider</h2>
93+
<div id="continuous-slider-example" class="slider-example">
94+
<p id="example-cs-label">Select Value:</p>
95+
96+
<div class="example-slider-wrapper">
97+
<div class="mdc-slider" tabindex="0" role="slider"
98+
aria-valuemin="0" aria-valuemax="100" aria-valuenow="30"
99+
aria-labelledby="example-cs-label">
100+
<div class="mdc-slider__track-container">
101+
<div class="mdc-slider__track"></div>
102+
</div>
103+
<div class="mdc-slider__thumb-container">
104+
<svg class="mdc-slider__thumb" width="21" height="21">
105+
<circle cx="10.5" cy="10.5" r="7.875"></circle>
106+
</svg>
107+
<div class="mdc-slider__focus-ring"></div>
108+
</div>
109+
</div>
110+
</div>
111+
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>
141+
</div>
142+
<div>
143+
<label>
144+
RTL: <input type="checkbox" name="rtl">
145+
</label>
146+
</div>
147+
<p>
148+
Value from <code>MDCSlider:input</code> event: <span class="value">0</span>
149+
</p>
150+
<p>
151+
Value from <code>MDCSlider:change</code> event: <span class="committed-value">0</span>
152+
</p>
153+
</div>
154+
</section>
155+
</main>
156+
<script src="assets/material-components-web.js" charset="utf-8"></script>
157+
<script>
158+
(function() {
159+
setTimeout(function() {
160+
mdc.slider.MDCSlider.attachTo(document.getElementById('hero-slider'));
161+
initDemo(document.getElementById('continuous-slider-example'));
162+
}, 80);
163+
164+
function initDemo(demoRoot) {
165+
var min = demoRoot.querySelector('[name="min"]');
166+
var max = demoRoot.querySelector('[name="max"]');
167+
var step = demoRoot.querySelector('[name="step"]');
168+
var darkTheme = demoRoot.querySelector('[name="dark-theme"]');
169+
var disabled = demoRoot.querySelector('[name="disabled"]');
170+
var useCustomColor = demoRoot.querySelector('[name="use-custom-color"]');
171+
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);
176+
177+
slider.listen('MDCSlider:input', function() {
178+
value.textContent = slider.value;
179+
});
180+
181+
slider.listen('MDCSlider:change', function() {
182+
committedValue.textContent = slider.value;
183+
});
184+
185+
min.addEventListener('input', function() {
186+
slider.min = parseFloat(min.value);
187+
});
188+
189+
max.addEventListener('input', function() {
190+
slider.max = parseFloat(max.value);
191+
});
192+
193+
step.addEventListener('input', function() {
194+
slider.step = parseFloat(step.value);
195+
});
196+
197+
darkTheme.addEventListener('change', function() {
198+
demoRoot
199+
.querySelector('.example-slider-wrapper')
200+
.classList[ darkTheme.checked ? 'add' : 'remove']('mdc-theme--dark');
201+
});
202+
203+
disabled.addEventListener('change', function() {
204+
slider.disabled = disabled.checked;
205+
});
206+
207+
useCustomColor.addEventListener('change', function() {
208+
demoRoot
209+
.querySelector('.example-slider-wrapper')
210+
.classList[ useCustomColor.checked ? 'add' : 'remove' ]('custom-bg');
211+
});
212+
213+
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();
221+
});
222+
}
223+
})();
224+
</script>
225+
</html>

0 commit comments

Comments
 (0)