Skip to content

Commit da35911

Browse files
brandyscarneybrandyscarney
committed
docs(range): add new parts for dual knobs to css shadow parts demo
1 parent e7d2960 commit da35911

8 files changed

Lines changed: 640 additions & 119 deletions

File tree

‎static/usage/v8/range/theming/css-shadow-parts/angular/example_component_css.md‎

Lines changed: 94 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,114 @@
11
```css
2-
ion-range::part(tick) {
3-
background: #a2d2ff;
2+
/* Shared styles for all ranges */
3+
ion-range {
4+
--knob-size: 34px;
45
}
56

6-
ion-range::part(tick-active) {
7-
background: #bde0fe;
7+
ion-range::part(knob) {
8+
background: #fff;
9+
10+
box-sizing: border-box;
811
}
912

10-
ion-range::part(pin) {
11-
display: inline-flex;
12-
align-items: center;
13-
justify-content: center;
13+
/* Hide the Material Design indicator */
14+
ion-range::part(knob)::before {
15+
display: none;
16+
}
1417

15-
background: #ffafcc;
18+
ion-range::part(pin) {
1619
color: #fff;
17-
1820
border-radius: 50%;
19-
transform: scale(1.01);
21+
}
22+
23+
ion-range::part(tick),
24+
ion-range::part(tick-active) {
25+
height: 8px;
26+
top: 17px;
27+
}
2028

21-
top: -20px;
29+
/* Single Knob Range */
30+
#range-single::part(bar),
31+
#range-single::part(tick) {
32+
background: #bed4ff;
33+
}
2234

23-
min-width: 28px;
24-
height: 28px;
25-
transition: transform 120ms ease, background 120ms ease;
35+
#range-single::part(bar-active),
36+
#range-single::part(tick-active) {
37+
background: #40a2fd;
2638
}
2739

28-
ion-range::part(pin)::before {
29-
content: none;
40+
#range-single::part(knob) {
41+
border: 4px solid #40a2fd;
3042
}
3143

32-
ion-range::part(knob) {
33-
background: #ffc8dd;
44+
#range-single::part(knob pressed) {
45+
background: #bed4ff;
46+
}
47+
48+
#range-single::part(pin),
49+
#range-single::part(pin)::before {
50+
background: #40a2fd;
51+
}
52+
53+
/* Dual Knobs (A/B) Range */
54+
#range-a-b::part(bar-active) {
55+
background: #1ea9ca;
56+
}
57+
58+
#range-a-b::part(knob-a) {
59+
border: 4px solid #0f8fd6;
60+
}
61+
62+
#range-a-b::part(knob-a pressed) {
63+
background: #cfeefe;
64+
}
65+
66+
#range-a-b::part(pin-a),
67+
#range-a-b::part(pin-a)::before {
68+
background: #0f8fd6;
69+
}
70+
71+
#range-a-b::part(knob-b) {
72+
border: 4px solid #2dc2bd;
73+
}
74+
75+
#range-a-b::part(knob-b pressed) {
76+
background: #d4f5f3;
77+
}
78+
79+
#range-a-b::part(pin-b),
80+
#range-a-b::part(pin-b)::before {
81+
background: #2dc2bd;
82+
}
83+
84+
/* Dual Knobs (Lower/Upper) Range */
85+
#range-lower-upper::part(bar-active) {
86+
background: linear-gradient(to right, #0059ff 0%, #b77bff 100%);
87+
}
88+
89+
#range-lower-upper::part(knob-lower) {
90+
border: 4px solid #0059ff;
91+
}
92+
93+
#range-lower-upper::part(knob-lower pressed) {
94+
background: #bed4ff;
95+
}
96+
97+
#range-lower-upper::part(pin-lower),
98+
#range-lower-upper::part(pin-lower)::before {
99+
background: #0059ff;
100+
}
101+
102+
#range-lower-upper::part(knob-upper) {
103+
border: 4px solid #b77bff;
34104
}
35105

36-
ion-range::part(bar) {
37-
background: #a2d2ff;
106+
#range-lower-upper::part(knob-upper pressed) {
107+
background: #f1e5ff;
38108
}
39109

40-
ion-range::part(bar-active) {
41-
background: #bde0fe;
110+
#range-lower-upper::part(pin-upper),
111+
#range-lower-upper::part(pin-upper)::before {
112+
background: #b77bff;
42113
}
43114
```

‎static/usage/v8/range/theming/css-shadow-parts/angular/example_component_html.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
```html
2+
<h2>Single Knob</h2>
23
<ion-range
4+
id="range-single"
35
aria-label="Custom range"
46
[min]="0"
57
[max]="10"
@@ -8,4 +10,26 @@
810
[ticks]="true"
911
[snaps]="true"
1012
></ion-range>
13+
14+
<h2>Dual Knobs (A/B)</h2>
15+
<ion-range
16+
id="range-a-b"
17+
aria-label="Custom dual knob range with A/B styling"
18+
[min]="0"
19+
[max]="10"
20+
[value]="{lower: 3, upper: 7}"
21+
[dualKnobs]="true"
22+
[pin]="true"
23+
></ion-range>
24+
25+
<h2>Dual Knobs (Lower/Upper)</h2>
26+
<ion-range
27+
id="range-lower-upper"
28+
aria-label="Custom dual knob range with lower/upper styling"
29+
[min]="0"
30+
[max]="10"
31+
[value]="{lower: 3, upper: 7}"
32+
[dualKnobs]="true"
33+
[pin]="true"
34+
></ion-range>
1135
```

‎static/usage/v8/range/theming/css-shadow-parts/demo.html‎

Lines changed: 139 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6,53 +6,135 @@
66
<title>Range</title>
77
<link rel="stylesheet" href="../../../common.css" />
88
<script src="../../../common.js"></script>
9-
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8.7.17-dev.11771959013.18adabe2/dist/ionic/ionic.esm.js"></script>
10-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8.7.17-dev.11771959013.18adabe2/css/ionic.bundle.css" />
9+
<script
10+
type="module"
11+
src="https://cdn.jsdelivr.net/npm/@ionic/core@8.7.17-dev.11771959013.18adabe2/dist/ionic/ionic.esm.js"
12+
></script>
13+
<link
14+
rel="stylesheet"
15+
href="https://cdn.jsdelivr.net/npm/@ionic/core@8.7.17-dev.11771959013.18adabe2/css/ionic.bundle.css"
16+
/>
1117
<style>
18+
.container {
19+
flex-direction: column;
20+
}
21+
22+
/* Shared styles for all ranges */
1223
ion-range {
24+
--knob-size: 34px;
25+
26+
width: 100%;
1327
max-width: 320px;
28+
29+
margin-bottom: 24px;
1430
}
1531

16-
ion-range::part(tick) {
17-
background: #a2d2ff;
32+
ion-range::part(knob) {
33+
background: #fff;
34+
35+
box-sizing: border-box;
1836
}
1937

20-
ion-range::part(tick-active) {
21-
background: #bde0fe;
38+
/* Hide the Material Design indicator */
39+
ion-range::part(knob)::before {
40+
display: none;
2241
}
2342

2443
ion-range::part(pin) {
25-
display: inline-flex;
26-
align-items: center;
27-
justify-content: center;
28-
29-
background: #ffafcc;
3044
color: #fff;
31-
3245
border-radius: 50%;
33-
transform: scale(1.01);
46+
}
3447

35-
top: -20px;
48+
ion-range::part(tick),
49+
ion-range::part(tick-active) {
50+
height: 8px;
51+
top: 17px;
52+
}
3653

37-
min-width: 28px;
38-
height: 28px;
39-
transition: transform 120ms ease, background 120ms ease;
54+
/* Single Knob Range */
55+
#range-single::part(bar),
56+
#range-single::part(tick) {
57+
background: #bed4ff;
4058
}
4159

42-
ion-range::part(pin)::before {
43-
content: none;
60+
#range-single::part(bar-active),
61+
#range-single::part(tick-active) {
62+
background: #40a2fd;
4463
}
4564

46-
ion-range::part(knob) {
47-
background: #ffc8dd;
65+
#range-single::part(knob) {
66+
border: 4px solid #40a2fd;
67+
}
68+
69+
#range-single::part(knob pressed) {
70+
background: #bed4ff;
71+
}
72+
73+
#range-single::part(pin),
74+
#range-single::part(pin)::before {
75+
background: #40a2fd;
76+
}
77+
78+
/* Dual Knobs (A/B) Range */
79+
#range-a-b::part(bar-active) {
80+
background: #1ea9ca;
81+
}
82+
83+
#range-a-b::part(knob-a) {
84+
border: 4px solid #0f8fd6;
85+
}
86+
87+
#range-a-b::part(knob-a pressed) {
88+
background: #cfeefe;
89+
}
90+
91+
#range-a-b::part(pin-a),
92+
#range-a-b::part(pin-a)::before {
93+
background: #0f8fd6;
94+
}
95+
96+
#range-a-b::part(knob-b) {
97+
border: 4px solid #2dc2bd;
4898
}
4999

50-
ion-range::part(bar) {
51-
background: #a2d2ff;
100+
#range-a-b::part(knob-b pressed) {
101+
background: #d4f5f3;
52102
}
53103

54-
ion-range::part(bar-active) {
55-
background: #bde0fe;
104+
#range-a-b::part(pin-b),
105+
#range-a-b::part(pin-b)::before {
106+
background: #2dc2bd;
107+
}
108+
109+
/* Dual Knobs (Lower/Upper) Range */
110+
#range-lower-upper::part(bar-active) {
111+
background: linear-gradient(to right, #0059ff 0%, #b77bff 100%);
112+
}
113+
114+
#range-lower-upper::part(knob-lower) {
115+
border: 4px solid #0059ff;
116+
}
117+
118+
#range-lower-upper::part(knob-lower pressed) {
119+
background: #bed4ff;
120+
}
121+
122+
#range-lower-upper::part(pin-lower),
123+
#range-lower-upper::part(pin-lower)::before {
124+
background: #0059ff;
125+
}
126+
127+
#range-lower-upper::part(knob-upper) {
128+
border: 4px solid #b77bff;
129+
}
130+
131+
#range-lower-upper::part(knob-upper pressed) {
132+
background: #f1e5ff;
133+
}
134+
135+
#range-lower-upper::part(pin-upper),
136+
#range-lower-upper::part(pin-upper)::before {
137+
background: #b77bff;
56138
}
57139
</style>
58140
</head>
@@ -61,7 +143,9 @@
61143
<ion-app>
62144
<ion-content>
63145
<div class="container">
146+
<h2>Single Knob</h2>
64147
<ion-range
148+
id="range-single"
65149
aria-label="Custom range"
66150
min="0"
67151
max="10"
@@ -70,8 +154,38 @@
70154
ticks="true"
71155
snaps="true"
72156
></ion-range>
157+
158+
<h2>Dual Knobs (A/B)</h2>
159+
<ion-range
160+
id="range-a-b"
161+
aria-label="Custom dual knob range with A/B styling"
162+
min="0"
163+
max="10"
164+
dual-knobs="true"
165+
pin="true"
166+
></ion-range>
167+
168+
<h2>Dual Knobs (Lower/Upper)</h2>
169+
<ion-range
170+
id="range-lower-upper"
171+
aria-label="Custom dual knob range with lower/upper styling"
172+
min="0"
173+
max="10"
174+
dual-knobs="true"
175+
pin="true"
176+
></ion-range>
73177
</div>
74178
</ion-content>
75179
</ion-app>
180+
181+
<script>
182+
const ranges = document.querySelectorAll('ion-range[dual-knobs]');
183+
ranges.forEach((range) => {
184+
range.value = {
185+
lower: 3,
186+
upper: 7,
187+
};
188+
});
189+
</script>
76190
</body>
77191
</html>

‎static/usage/v8/range/theming/css-shadow-parts/index.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
1313

1414
<Playground
1515
version="8"
16+
size="550px"
1617
code={{
1718
javascript,
1819
react: {

0 commit comments

Comments
 (0)