Skip to content

Commit 6c5bfac

Browse files
brandyscarneybrandyscarney
committed
test(range): update custom test to include lower/upper parts
1 parent 7924d58 commit 6c5bfac

1 file changed

Lines changed: 136 additions & 50 deletions

File tree

‎core/src/components/range/test/custom/index.html‎

Lines changed: 136 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,20 @@
1414
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
1515
</head>
1616
<style>
17-
/* 1st Custom Range */
17+
h2 {
18+
font-size: 12px;
19+
font-weight: normal;
20+
21+
color: #6f7378;
22+
23+
margin-top: 10px;
24+
margin-left: 5px;
25+
}
26+
27+
/**
28+
* 1st Custom Range: All Parts
29+
* -----------------------------------
30+
*/
1831
.range-part::part(bar) {
1932
background: red;
2033
}
@@ -53,14 +66,17 @@
5366
background: orange;
5467
}
5568

56-
/* 2nd Custom Range: Single Knob */
57-
.custom-knobs {
69+
/**
70+
* Shared Custom Knob Styles
71+
* -----------------------------------
72+
*/
73+
.custom-knobs-range {
5874
--color-blue-light: #3b82f6;
5975
--color-blue-primary: var(--ion-color-primary, #0054e9);
6076
--color-blue-dark: #1e3a8a;
6177
}
6278

63-
.custom-knobs::part(knob-handle) {
79+
.custom-knobs-range::part(knob-handle) {
6480
--custom-knob-width: 50px;
6581
--custom-knob-height: 25px;
6682

@@ -76,7 +92,7 @@
7692
transform-origin: center center;
7793
}
7894

79-
.custom-knobs::part(knob) {
95+
.custom-knobs-range::part(knob) {
8096
background: rgba(255, 255, 255, 0.5);
8197
backdrop-filter: blur(10px);
8298

@@ -93,106 +109,145 @@
93109
}
94110

95111
/* Pressed knob */
96-
.custom-knobs::part(knob pressed) {
112+
.custom-knobs-range::part(knob pressed) {
97113
background: var(--color-blue-primary);
98114
}
99115

100116
/* Hover/focus indicator */
101-
.custom-knobs::part(knob)::before {
117+
.custom-knobs-range::part(knob)::before {
102118
width: 100%;
103119
height: 100%;
104120
border-radius: inherit;
105121
}
106122

107123
/* Pressed/focused knob hover/focus indicator */
108-
.custom-knobs::part(knob pressed)::before,
109-
.custom-knobs::part(knob focused)::before {
124+
.custom-knobs-range::part(knob pressed)::before,
125+
.custom-knobs-range::part(knob focused)::before {
110126
transform: scale(1);
111127
}
112128

129+
/* Displayed knob values */
130+
.custom-knobs-range .knob-value {
131+
display: flex;
132+
align-items: center;
133+
justify-content: center;
134+
135+
width: 36px;
136+
height: 36px;
137+
138+
border: 1px solid #000;
139+
border-radius: 4px;
140+
}
141+
113142
/* TODO hover states */
114143

115144
/* iOS offset is larger than MD due to not having a bottom arrow */
116-
.ios.custom-knobs {
145+
.ios.custom-knobs-range {
117146
--pin-offset: 8px;
118147
}
119148

120-
.md.custom-knobs {
149+
.md.custom-knobs-range {
121150
--pin-offset: 4px;
122151
}
123152

124-
.ios.custom-knobs {
153+
.ios.custom-knobs-range {
125154
padding-top: 40px;
126155
}
127156

128-
.ios.custom-knobs::part(pin) {
157+
.ios.custom-knobs-range::part(pin) {
129158
border-radius: 50%;
130159
background-color: var(--color-blue-primary);
131160
color: #fff;
132161
}
133162

134163
/* Move the pin up so it sits above the taller custom knob when pressed/focused */
135-
.custom-knobs::part(pin pressed),
136-
.custom-knobs::part(pin focused) {
164+
.custom-knobs-range::part(pin pressed),
165+
.custom-knobs-range::part(pin focused) {
137166
transform: translate3d(0, calc(-100% - (var(--custom-knob-height) / 2) + var(--pin-offset)), 0) scale(1);
138167
}
139168

140-
.custom-knobs [slot='start'] {
169+
.custom-knobs-range [slot='start'] {
141170
margin-inline-end: 36px;
142171
}
143172

144-
.custom-knobs [slot='end'] {
173+
.custom-knobs-range [slot='end'] {
145174
margin-inline-start: 36px;
146175
}
147176

148-
/* 3rd Custom Range: Dual Knobs */
149-
.custom-knobs.range-dual-knobs::part(knob-a) {
177+
/**
178+
* 2nd Custom Range: Single Knob
179+
* -----------------------------------
180+
*/
181+
182+
/* Pressed knob */
183+
#single-knob-range::part(knob pressed) {
184+
background: var(--color-blue-primary);
185+
}
186+
187+
/**
188+
* 3rd Custom Range: Dual Knobs
189+
* Knobs Lower & Upper
190+
* -----------------------------------
191+
*/
192+
193+
/* Knob lower */
194+
#lower-upper-dual-knobs-range::part(knob-lower) {
150195
border-radius: 50% 0 0 50%;
151196
}
152197

153-
.custom-knobs.range-dual-knobs::part(knob-b) {
198+
/* Knob upper */
199+
#lower-upper-dual-knobs-range::part(knob-upper) {
154200
border-radius: 0 50% 50% 0;
155201
}
156202

157-
/* Pressed knob a */
158-
.custom-knobs::part(knob-a pressed) {
203+
/* Pressed knob lower */
204+
#lower-upper-dual-knobs-range::part(knob-lower pressed) {
159205
background: var(--color-blue-light);
160206
}
161207

162-
/* Pressed knob b */
163-
.custom-knobs::part(knob-b pressed) {
208+
/* Pressed knob upper */
209+
#lower-upper-dual-knobs-range::part(knob-upper pressed) {
164210
background: var(--color-blue-dark);
165211
}
166212

167-
.custom-knobs.range-dual-knobs::part(pin-a),
168-
.custom-knobs.range-dual-knobs::part(pin-a):before {
213+
/* Pin lower */
214+
#lower-upper-dual-knobs-range.range-dual-knobs::part(pin-lower),
215+
#lower-upper-dual-knobs-range.range-dual-knobs::part(pin-lower):before {
169216
background: var(--color-blue-light);
170217
}
171218

172-
.custom-knobs.range-dual-knobs::part(pin-b),
173-
.custom-knobs.range-dual-knobs::part(pin-b):before {
219+
/* Pin upper */
220+
#lower-upper-dual-knobs-range.range-dual-knobs::part(pin-upper),
221+
#lower-upper-dual-knobs-range.range-dual-knobs::part(pin-upper):before {
174222
background: var(--color-blue-dark);
175223
}
176224

177-
/* Displayed knob values */
178-
.custom-knobs.range-dual-knobs .knob-value {
179-
display: flex;
180-
align-items: center;
181-
justify-content: center;
225+
/**
226+
* 4th Custom Range: Dual Knobs
227+
* Knobs A & B
228+
* -----------------------------------
229+
*/
182230

183-
width: 36px;
184-
height: 36px;
231+
/* Pressed knob A */
232+
#a-b-dual-knobs-range::part(knob-a pressed) {
233+
background: var(--color-blue-light);
234+
}
185235

186-
border: 1px solid #000;
187-
border-radius: 4px;
236+
/* Pressed knob B */
237+
#a-b-dual-knobs-range::part(knob-b pressed) {
238+
background: var(--color-blue-dark);
188239
}
189240

190-
.custom-knobs.range-dual-knobs [slot='start'] {
191-
border-color: var(--color-blue-light);
241+
/* Pin A */
242+
#a-b-dual-knobs-range.range-dual-knobs::part(pin-a),
243+
#a-b-dual-knobs-range.range-dual-knobs::part(pin-a):before {
244+
background: var(--color-blue-light);
192245
}
193246

194-
.custom-knobs.range-dual-knobs [slot='end'] {
195-
border-color: var(--color-blue-dark);
247+
/* Pin B */
248+
#a-b-dual-knobs-range.range-dual-knobs::part(pin-b),
249+
#a-b-dual-knobs-range.range-dual-knobs::part(pin-b):before {
250+
background: var(--color-blue-dark);
196251
}
197252
</style>
198253
<body>
@@ -205,6 +260,7 @@
205260

206261
<ion-content class="ion-padding">
207262
<!-- 1st Custom Range -->
263+
<h2>Custom Range</h2>
208264
<ion-range
209265
class="range-part"
210266
min="-200"
@@ -217,9 +273,10 @@
217273
></ion-range>
218274

219275
<!-- 2nd Custom Range: Single Knob -->
276+
<h2>Custom Range: Single Knob</h2>
220277
<ion-range
221278
id="single-knob-range"
222-
class="custom-knobs"
279+
class="custom-knobs-range"
223280
step="5"
224281
snaps="true"
225282
pin="true"
@@ -234,10 +291,26 @@
234291
</span>
235292
</ion-range>
236293

237-
<!-- 3rd Custom Range: Dual Knobs -->
294+
<!-- 3rd Custom Range: Dual Knobs with Knob Lower & Upper -->
295+
<h2>Custom Range: Dual Knobs with Knob Lower & Upper</h2>
238296
<ion-range
239-
id="dual-knobs-range"
240-
class="custom-knobs"
297+
id="lower-upper-dual-knobs-range"
298+
class="custom-knobs-range range-lower-upper-knobs"
299+
step="5"
300+
snaps="true"
301+
pin="true"
302+
dual-knobs="true"
303+
aria-label="Custom Lower & Upper Knobs Range"
304+
>
305+
<div slot="start" class="knob-value"></div>
306+
<div slot="end" class="knob-value"></div>
307+
</ion-range>
308+
309+
<!-- 4th Custom Range: Dual Knobs with Knob A & B -->
310+
<h2>Custom Range: Dual Knobs with Knob A & B</h2>
311+
<ion-range
312+
id="a-b-dual-knobs-range"
313+
class="custom-knobs-range"
241314
step="5"
242315
snaps="true"
243316
pin="true"
@@ -257,20 +330,33 @@
257330
upper: '100',
258331
};
259332

260-
const dualKnobs = document.getElementById('dual-knobs-range');
261-
dualKnobs.value = {
333+
const lowerUpperKnobs = document.getElementById('lower-upper-dual-knobs-range');
334+
lowerUpperKnobs.value = {
335+
lower: '40',
336+
upper: '60',
337+
};
338+
339+
const abDualKnobs = document.getElementById('a-b-dual-knobs-range');
340+
abDualKnobs.value = {
262341
lower: '25',
263342
upper: '75',
264343
};
265344

266345
function updateDisplayedKnobValues() {
267-
document.querySelector('#dual-knobs-range [slot="start"]').textContent = dualKnobs.value.lower;
268-
document.querySelector('#dual-knobs-range [slot="end"]').textContent = dualKnobs.value.upper;
346+
document.querySelector('#lower-upper-dual-knobs-range [slot="start"]').textContent =
347+
lowerUpperKnobs.value.lower;
348+
document.querySelector('#lower-upper-dual-knobs-range [slot="end"]').textContent = lowerUpperKnobs.value.upper;
349+
document.querySelector('#a-b-dual-knobs-range [slot="start"]').textContent = abDualKnobs.value.lower;
350+
document.querySelector('#a-b-dual-knobs-range [slot="end"]').textContent = abDualKnobs.value.upper;
269351
}
270352

271353
updateDisplayedKnobValues();
272354

273-
dualKnobs.addEventListener('ionChange', () => {
355+
lowerUpperKnobs.addEventListener('ionChange', () => {
356+
updateDisplayedKnobValues();
357+
});
358+
359+
abDualKnobs.addEventListener('ionChange', () => {
274360
updateDisplayedKnobValues();
275361
});
276362
</script>

0 commit comments

Comments
 (0)