Skip to content

Commit 2c6e11b

Browse files
adamdbradleyadamdbradley
committed
feat(range): create ion-range input
1 parent 1d2a0b9 commit 2c6e11b

File tree

13 files changed

+1050
-1
lines changed

13 files changed

+1050
-1
lines changed

‎src/components.ios.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"components/picker/picker.ios",
2626
"components/popover/popover.ios",
2727
"components/radio/radio.ios",
28+
"components/range/range.ios",
2829
"components/searchbar/searchbar.ios",
2930
"components/segment/segment.ios",
3031
"components/select/select.ios",

‎src/components.md.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"components/picker/picker.md",
2525
"components/popover/popover.md",
2626
"components/radio/radio.md",
27+
"components/range/range.md",
2728
"components/searchbar/searchbar.md",
2829
"components/segment/segment.md",
2930
"components/select/select.md",

‎src/components.wp.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"components/picker/picker.wp",
2525
"components/popover/popover.wp",
2626
"components/radio/radio.wp",
27+
"components/range/range.wp",
2728
"components/searchbar/searchbar.wp",
2829
"components/segment/segment.wp",
2930
"components/select/select.wp",

‎src/components/item/item.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ import {Label} from '../label/label';
4848
'<ion-label *ngIf="_viewLabel">' +
4949
'<ng-content></ng-content>' +
5050
'</ion-label>' +
51-
'<ng-content select="ion-select,ion-input,ion-textarea,ion-datetime"></ng-content>' +
51+
'<ng-content select="ion-select,ion-input,ion-textarea,ion-datetime,ion-range"></ng-content>' +
5252
'</div>' +
5353
'<ng-content select="[item-right],ion-radio,ion-toggle"></ng-content>' +
5454
'</div>' +

‎src/components/range/range.ios.scss

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
@import "../../globals.ios";
2+
3+
// iOS Range
4+
// --------------------------------------------------
5+
6+
$range-ios-slider-height: 42px !default;
7+
8+
$range-ios-hit-width: 42px !default;
9+
$range-ios-hit-height: $range-ios-slider-height !default;
10+
11+
$range-ios-bar-height: 2px !default;
12+
$range-ios-bar-background-color: #bdbdbd !default;
13+
$range-ios-bar-active-background-color: color($colors-ios, primary) !default;
14+
15+
$range-ios-knob-width: 12px !default;
16+
$range-ios-knob-height: $range-ios-knob-width !default;
17+
$range-ios-knob-background-color: $range-ios-bar-active-background-color !default;
18+
19+
$range-ios-tick-width: 6px !default;
20+
$range-ios-tick-height: $range-ios-tick-width !default;
21+
$range-ios-tick-background-color: $range-ios-bar-background-color !default;
22+
$range-ios-tick-active-background-color: $range-ios-bar-active-background-color !default;
23+
24+
$range-ios-pin-background-color: $range-ios-bar-active-background-color !default;
25+
$range-ios-pin-color: color-contrast($colors-ios, $range-ios-pin-background-color) !default;
26+
$range-ios-pin-font-size: 12px !default;
27+
28+
29+
.item-range .item-inner {
30+
overflow: visible;
31+
}
32+
33+
.item-range .input-wrapper {
34+
overflow: visible;
35+
36+
flex-direction: column;
37+
}
38+
39+
.item-range ion-range {
40+
width: 100%;
41+
}
42+
43+
ion-range {
44+
position: relative;
45+
display: block;
46+
47+
margin-top: -16px;
48+
padding: 8px;
49+
}
50+
51+
.range-slider {
52+
position: relative;
53+
54+
height: $range-ios-slider-height;
55+
56+
cursor: pointer;
57+
}
58+
59+
.range-bar {
60+
position: absolute;
61+
top: ($range-ios-slider-height / 2);
62+
left: 0;
63+
64+
width: 100%;
65+
height: $range-ios-bar-height;
66+
67+
background: $range-ios-bar-background-color;
68+
69+
pointer-events: none;
70+
}
71+
72+
.range-pressed .range-bar-active {
73+
will-change: left, right;
74+
}
75+
76+
.range-pressed .range-knob-handle {
77+
will-change: left;
78+
}
79+
80+
.range-bar-active {
81+
bottom: 0;
82+
83+
width: auto;
84+
85+
background: $range-ios-bar-active-background-color;
86+
}
87+
88+
.range-knob-handle {
89+
position: absolute;
90+
top: ($range-ios-slider-height / 2);
91+
left: 0%;
92+
93+
margin-top: -($range-ios-hit-height / 2);
94+
margin-left: -($range-ios-hit-width / 2);
95+
96+
width: $range-ios-hit-width;
97+
height: $range-ios-hit-height;
98+
99+
text-align: center;
100+
}
101+
102+
.range-knob {
103+
position: absolute;
104+
top: ($range-ios-hit-height / 2) - ($range-ios-knob-height / 2) + ($range-ios-bar-height / 2);
105+
left: ($range-ios-hit-width / 2) - ($range-ios-knob-width / 2);
106+
107+
width: $range-ios-knob-width;
108+
height: $range-ios-knob-height;
109+
110+
border-radius: 50%;
111+
112+
background: $range-ios-knob-background-color;
113+
114+
pointer-events: none;
115+
}
116+
117+
.range-tick {
118+
position: absolute;
119+
top: ($range-ios-hit-height / 2) - ($range-ios-tick-height / 2) + ($range-ios-bar-height / 2);
120+
121+
margin-left: ($range-ios-tick-width / 2) * -1;
122+
123+
width: $range-ios-tick-width;
124+
height: $range-ios-tick-height;
125+
126+
border-radius: 50%;
127+
128+
background: $range-ios-tick-background-color;
129+
130+
pointer-events: none;
131+
}
132+
133+
.range-tick-active {
134+
background: $range-ios-tick-active-background-color;
135+
}
136+
137+
.range-pin {
138+
position: relative;
139+
top: -20px;
140+
display: inline-block;
141+
142+
padding: 8px;
143+
144+
min-width: 28px;
145+
146+
border-radius: 50px;
147+
148+
font-size: $range-ios-pin-font-size;
149+
150+
text-align: center;
151+
152+
color: $range-ios-pin-color;
153+
154+
background: $range-ios-pin-background-color;
155+
156+
transform: translate3d(0, 28px, 0) scale(.01);
157+
transition: transform 120ms ease;
158+
}
159+
160+
.range-knob-pressed .range-pin {
161+
transform: translate3d(0, 0, 0) scale(1);
162+
}

‎src/components/range/range.md.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@import "../../globals.md";
2+
3+
// Material Design Range
4+
// --------------------------------------------------

0 commit comments

Comments
 (0)