Skip to content

Commit 061af93

Browse files
brandyscarneybrandyscarney
committed
fix(range): update the styling for all modes
references #5422
1 parent d24b080 commit 061af93

File tree

5 files changed

+59
-28
lines changed

5 files changed

+59
-28
lines changed

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

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
// iOS Range
44
// --------------------------------------------------
55

6-
$range-ios-padding: 8px 16px !default;
6+
$range-ios-padding-vertical: 8px !default;
7+
$range-ios-padding-horizontal: 16px !default;
78

89
$range-ios-slider-height: 42px !default;
910

@@ -20,15 +21,16 @@ $range-ios-knob-box-shadow: 0 3px 1px rgba(0, 0, 0, 0.1), 0 4p
2021
$range-ios-knob-border-radius: 50% !default;
2122
$range-ios-knob-background-color: #fff !default;
2223

23-
$range-ios-tick-width: 6px !default;
24-
$range-ios-tick-height: $range-ios-tick-width !default;
24+
$range-ios-tick-width: $range-ios-bar-height !default;
25+
$range-ios-tick-height: 8px !default;
26+
$range-ios-tick-border-radius: 0 !default;
2527
$range-ios-tick-background-color: $range-ios-bar-background-color !default;
2628
$range-ios-tick-active-background-color: $range-ios-bar-active-background-color !default;
2729

2830
$range-ios-pin-background-color: transparent !default;
2931
$range-ios-pin-color: $text-ios-color !default;
3032
$range-ios-pin-font-size: 12px !default;
31-
33+
$range-ios-pin-padding: 8px !default;
3234

3335
.item-range .item-inner {
3436
overflow: visible;
@@ -48,7 +50,11 @@ ion-range {
4850
position: relative;
4951
display: block;
5052

51-
padding: $range-ios-padding;
53+
padding: $range-ios-padding-vertical $range-ios-padding-horizontal;
54+
}
55+
56+
.range-has-pin {
57+
padding-top: $range-ios-padding-vertical + $range-ios-pin-font-size;
5258
}
5359

5460
.range-slider {
@@ -128,7 +134,7 @@ ion-range {
128134
width: $range-ios-tick-width;
129135
height: $range-ios-tick-height;
130136

131-
border-radius: 50%;
137+
border-radius: $range-ios-tick-border-radius;
132138

133139
background: $range-ios-tick-background-color;
134140

@@ -144,7 +150,7 @@ ion-range {
144150
top: -20px;
145151
display: inline-block;
146152

147-
padding: 8px;
153+
padding: $range-ios-pin-padding;
148154

149155
min-width: 28px;
150156

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

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
// Material Design Range
44
// --------------------------------------------------
55

6-
$range-md-padding: 8px !default;
6+
$range-md-padding-vertical: 8px !default;
7+
$range-md-padding-horizontal: 8px !default;
78

89
$range-md-slider-height: 42px !default;
910

@@ -18,14 +19,16 @@ $range-md-knob-width: 12px !default;
1819
$range-md-knob-height: $range-md-knob-width !default;
1920
$range-md-knob-background-color: $range-md-bar-active-background-color !default;
2021

21-
$range-md-tick-width: 0 !default;
22+
$range-md-tick-width: 2px !default;
2223
$range-md-tick-height: $range-md-tick-width !default;
23-
$range-md-tick-background-color: $range-md-bar-background-color !default;
24-
$range-md-tick-active-background-color: $range-md-bar-active-background-color !default;
24+
$range-md-tick-border-radius: 50% !default;
25+
$range-md-tick-background-color: #000 !default;
26+
$range-md-tick-active-background-color: $range-md-tick-background-color !default;
2527

2628
$range-md-pin-background-color: $range-md-bar-active-background-color !default;
2729
$range-md-pin-color: color-contrast($colors-md, $range-md-bar-active-background-color) !default;
2830
$range-md-pin-font-size: 12px !default;
31+
$range-md-pin-padding: 8px !default;
2932

3033

3134
.item-range .item-inner {
@@ -46,7 +49,11 @@ ion-range {
4649
position: relative;
4750
display: block;
4851

49-
padding: $range-md-padding;
52+
padding: $range-md-padding-vertical $range-md-padding-horizontal;
53+
}
54+
55+
.range-has-pin {
56+
padding-top: $range-md-padding-vertical + $range-md-pin-font-size + $range-md-pin-padding;
5057
}
5158

5259
.range-slider {
@@ -102,6 +109,8 @@ ion-range {
102109

103110
.range-knob {
104111
position: absolute;
112+
z-index: 2;
113+
105114
top: ($range-md-hit-height / 2) - ($range-md-knob-height / 2) + ($range-md-bar-height / 2);
106115
left: ($range-md-hit-width / 2) - ($range-md-knob-width / 2);
107116

@@ -117,14 +126,16 @@ ion-range {
117126

118127
.range-tick {
119128
position: absolute;
129+
z-index: 1;
130+
120131
top: ($range-md-hit-height / 2) - ($range-md-tick-height / 2) + ($range-md-bar-height / 2);
121132

122133
margin-left: ($range-md-tick-width / 2) * -1;
123134

124135
width: $range-md-tick-width;
125136
height: $range-md-tick-height;
126137

127-
border-radius: 50%;
138+
border-radius: $range-md-tick-border-radius;
128139

129140
background: $range-md-tick-background-color;
130141

@@ -140,11 +151,11 @@ ion-range {
140151
top: -20px;
141152
display: inline-block;
142153

143-
padding: 8px;
154+
padding: $range-md-pin-padding;
144155

145156
min-width: 28px;
146157

147-
border-radius: 50px;
158+
border-radius: 50%;
148159

149160
font-size: $range-md-pin-font-size;
150161

@@ -166,14 +177,15 @@ ion-range {
166177
transform: scale(1.5);
167178
}
168179

169-
// Generate iOS Range Colors
180+
// Generate Material Design Range Colors
170181
// --------------------------------------------------
171182

172183
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
173184

174185
ion-range[#{$color-name}] {
175186
.range-bar-active,
176-
.range-knob {
187+
.range-knob,
188+
.range-pin {
177189
background: $color-base;
178190
}
179191
}

‎src/components/range/range.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,7 @@ export class RangeKnob {
127127
host: {
128128
'[class.range-disabled]': '_disabled',
129129
'[class.range-pressed]': '_pressed',
130+
'[class.range-has-pin]': '_pin',
130131
},
131132
directives: [RangeKnob],
132133
providers: [RANGE_VALUE_ACCESSOR],

‎src/components/range/range.wp.scss

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
// Windows Range
44
// --------------------------------------------------
55

6-
$range-wp-padding: 8px !default;
6+
$range-wp-padding-vertical: 8px !default;
7+
$range-wp-padding-horizontal: 8px !default;
78

89
$range-wp-slider-height: 42px !default;
910

@@ -19,14 +20,16 @@ $range-wp-knob-height: $range-wp-knob-width * 3 !default;
1920
$range-wp-knob-background-color: $range-wp-bar-active-background-color !default;
2021
$range-wp-knob-border-radius: $range-wp-knob-width / 2 !default;
2122

22-
$range-wp-tick-width: 0 !default;
23-
$range-wp-tick-height: $range-wp-tick-width !default;
23+
$range-wp-tick-width: $range-wp-bar-height !default;
24+
$range-wp-tick-height: $range-wp-tick-width * 3 !default;
25+
$range-wp-tick-border-radius: $range-wp-knob-width / 2 !default;
2426
$range-wp-tick-background-color: $range-wp-bar-background-color !default;
2527
$range-wp-tick-active-background-color: $range-wp-bar-active-background-color !default;
2628

2729
$range-wp-pin-background-color: $range-wp-bar-active-background-color !default;
2830
$range-wp-pin-color: color-contrast($colors-wp, $range-wp-bar-active-background-color) !default;
2931
$range-wp-pin-font-size: 12px !default;
32+
$range-wp-pin-padding: 8px !default;
3033

3134

3235
.item-range .item-inner {
@@ -47,7 +50,11 @@ ion-range {
4750
position: relative;
4851
display: block;
4952

50-
padding: $range-wp-padding;
53+
padding: $range-wp-padding-vertical $range-wp-padding-horizontal;
54+
}
55+
56+
.range-has-pin {
57+
padding-top: $range-wp-padding-vertical + $range-wp-pin-font-size + $range-wp-pin-padding;
5158
}
5259

5360
.range-slider {
@@ -125,7 +132,7 @@ ion-range {
125132
width: $range-wp-tick-width;
126133
height: $range-wp-tick-height;
127134

128-
border-radius: 50%;
135+
border-radius: $range-wp-tick-border-radius;
129136

130137
background: $range-wp-tick-background-color;
131138

@@ -138,10 +145,10 @@ ion-range {
138145

139146
.range-pin {
140147
position: relative;
141-
top: -20px;
148+
top: -24px;
142149
display: inline-block;
143150

144-
padding: 8px;
151+
padding: $range-wp-pin-padding;
145152

146153
min-width: 28px;
147154

@@ -163,14 +170,16 @@ ion-range {
163170
transform: translate3d(0, 0, 0) scale(1);
164171
}
165172

166-
// Generate iOS Range Colors
173+
// Generate Windows Range Colors
167174
// --------------------------------------------------
168175

169176
@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
170177

171178
ion-range[#{$color-name}] {
172179
.range-bar-active,
173-
.range-knob {
180+
.range-tick-active,
181+
.range-knob,
182+
.range-pin {
174183
background: $color-base;
175184
}
176185
}

‎src/components/range/test/basic/page1.html

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@
1818
<ion-content>
1919

2020
<ion-list>
21+
<ion-item>
22+
<ion-range [(ngModel)]="singleValue" danger pin="true"></ion-range>
23+
</ion-item>
2124

2225
<ion-item>
2326
<ion-label>no init value, default min/max, {{singleValue}}</ion-label>
@@ -38,7 +41,7 @@
3841

3942
<ion-item>
4043
<ion-label>step=100, snaps, {{singleValue4}}</ion-label>
41-
<ion-range min="1000" max="2000" step="100" snaps="true" [(ngModel)]="singleValue4"></ion-range>
44+
<ion-range min="1000" max="2000" step="100" snaps="true" secondary [(ngModel)]="singleValue4"></ion-range>
4245
</ion-item>
4346

4447
<ion-item>
@@ -53,7 +56,7 @@
5356

5457
<ion-item>
5558
<ion-label>pin, {{singleValue}}</ion-label>
56-
<ion-range [(ngModel)]="singleValue" pin="true"></ion-range>
59+
<ion-range [(ngModel)]="singleValue" danger pin="true"></ion-range>
5760
</ion-item>
5861

5962
<ion-item>

0 commit comments

Comments
 (0)