Skip to content

Commit fc819dd

Browse files
brandyscarneybrandyscarney
committed
feat(range): add ability to add labels to the left/right of range
using `range-left` and `range-right` inside of `ion-range` will place the element to the left or right of the range. references #5422
1 parent 03f4511 commit fc819dd

File tree

12 files changed

+114
-94
lines changed

12 files changed

+114
-94
lines changed

‎demos/range/index.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import {App} from 'ionic-angular';
1+
import {Component} from '@angular/core';
2+
import {ionicBootstrap} from 'ionic-angular';
23

3-
@App({
4+
@Component({
45
templateUrl: 'main.html'
56
})
67
class ApiDemoApp {
@@ -13,3 +14,5 @@ class ApiDemoApp {
1314
console.log("Changed", ev);
1415
}
1516
}
17+
18+
ionicBootstrap(ApiDemoApp);

‎demos/range/main.html

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,10 @@
99
<ion-badge item-right>{{brightness}}</ion-badge>
1010
</ion-list-header>
1111
<ion-item>
12-
<ion-icon item-left small name="sunny"></ion-icon>
13-
<ion-range [(ngModel)]="brightness"></ion-range>
14-
<ion-icon item-right name="sunny"></ion-icon>
12+
<ion-range [(ngModel)]="brightness">
13+
<ion-icon range-left small name="sunny"></ion-icon>
14+
<ion-icon range-right name="sunny"></ion-icon>
15+
</ion-range>
1516
</ion-item>
1617
</ion-list>
1718

@@ -21,9 +22,10 @@
2122
<ion-badge item-right secondary>{{saturation}}</ion-badge>
2223
</ion-list-header>
2324
<ion-item>
24-
<ion-note item-left>-200</ion-note>
25-
<ion-range min="-200" max="200" pin="true" [(ngModel)]="saturation" secondary></ion-range>
26-
<ion-note item-right>200</ion-note>
25+
<ion-range min="-200" max="200" pin="true" [(ngModel)]="saturation" secondary>
26+
<ion-label range-left>-200</ion-label>
27+
<ion-label range-right>200</ion-label>
28+
</ion-range>
2729
</ion-item>
2830
</ion-list>
2931

@@ -33,9 +35,10 @@
3335
<ion-badge item-right danger>{{warmth}}</ion-badge>
3436
</ion-list-header>
3537
<ion-item>
36-
<ion-icon item-left small danger name="thermometer"></ion-icon>
37-
<ion-range min="1000" max="2000" step="100" snaps="true" [(ngModel)]="warmth" danger></ion-range>
38-
<ion-icon item-right danger name="thermometer"></ion-icon>
38+
<ion-range min="1000" max="2000" step="100" snaps="true" [(ngModel)]="warmth" danger>
39+
<ion-icon range-left small danger name="thermometer"></ion-icon>
40+
<ion-icon range-right danger name="thermometer"></ion-icon>
41+
</ion-range>
3942
</ion-item>
4043
</ion-list>
4144

@@ -46,9 +49,10 @@
4649
<ion-badge item-right dark>{{structure.upper}}</ion-badge>
4750
</ion-list-header>
4851
<ion-item>
49-
<ion-note item-left>0</ion-note>
50-
<ion-range dualKnobs="true" pin="true" [(ngModel)]="structure" (ionChange)="onChange($event)" dark></ion-range>
51-
<ion-note item-right>100</ion-note>
52+
<ion-range dualKnobs="true" pin="true" [(ngModel)]="structure" (ionChange)="onChange($event)" dark>
53+
<ion-label range-left>-0</ion-label>
54+
<ion-label range-right>100</ion-label>
55+
</ion-range>
5256
</ion-item>
5357
</ion-list>
5458
</ion-content>

‎scripts/demos/index.template.dev.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,13 @@
1010
<link md-href="../output.md.css" rel="stylesheet">
1111
<link wp-href="../output.wp.css" rel="stylesheet">
1212
<script type="text/javascript" src="/dist/demos/scrollbar-fix.js"></script>
13+
1314
<script src="../../js/es6-shim.min.js"></script>
1415
<script src="../../js/es6-module-loader.src.js"></script>
16+
<script src="../../js/Reflect.js"></script>
17+
<script src="../../js/zone.js"></script>
1518
<script src="../../js/system.src.js"></script>
19+
1620
<script>
1721
System.config({
1822
map: {
@@ -36,12 +40,8 @@
3640
});
3741
</script>
3842

39-
<script src="../../js/zone.js"></script>
40-
<script src="../../js/Reflect.js"></script>
41-
42-
<script src="../../js/Rx.js"></script>
43-
4443
<script src="../../bundles/ionic.system.js"></script>
44+
<script src="../../js/Rx.js"></script>
4545
</head>
4646
<body>
4747
<ion-app>

‎src/components.core.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"components/menu/menu",
2323
"components/modal/modal",
2424
"components/popover/popover",
25+
"components/range/range",
2526
"components/refresher/refresher",
2627
"components/scroll/scroll",
2728
"components/show-hide-when/show-hide-when",

‎src/components/icon/icon.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,5 @@ ion-icon {
1212

1313
ion-icon[small] {
1414
font-size: 1.1em;
15+
min-height: 1.1em;
1516
}

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

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -32,37 +32,30 @@ $range-ios-pin-color: $text-ios-color !default;
3232
$range-ios-pin-font-size: 12px !default;
3333
$range-ios-pin-padding: 8px !default;
3434

35-
.item-range .item-inner {
36-
overflow: visible;
37-
}
38-
39-
.item-range .input-wrapper {
40-
overflow: visible;
4135

42-
flex-direction: column;
36+
ion-range {
37+
padding: $range-ios-padding-vertical $range-ios-padding-horizontal;
4338
}
4439

45-
.item-range ion-range {
46-
width: 100%;
40+
[range-left],
41+
[range-right] {
42+
margin: 0 12px;
4743
}
4844

49-
ion-range {
50-
position: relative;
51-
display: block;
45+
[range-left] {
46+
margin-left: 0;
47+
}
5248

53-
padding: $range-ios-padding-vertical $range-ios-padding-horizontal;
49+
[range-right] {
50+
margin-right: 0;
5451
}
5552

5653
.range-has-pin {
5754
padding-top: $range-ios-padding-vertical + $range-ios-pin-font-size;
5855
}
5956

6057
.range-slider {
61-
position: relative;
62-
6358
height: $range-ios-slider-height;
64-
65-
cursor: pointer;
6659
}
6760

6861
.range-bar {

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

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -31,24 +31,7 @@ $range-md-pin-font-size: 12px !default;
3131
$range-md-pin-padding: 8px !default;
3232

3333

34-
.item-range .item-inner {
35-
overflow: visible;
36-
}
37-
38-
.item-range .input-wrapper {
39-
overflow: visible;
40-
41-
flex-direction: column;
42-
}
43-
44-
.item-range ion-range {
45-
width: 100%;
46-
}
47-
4834
ion-range {
49-
position: relative;
50-
display: block;
51-
5235
padding: $range-md-padding-vertical $range-md-padding-horizontal;
5336
}
5437

@@ -57,11 +40,7 @@ ion-range {
5740
}
5841

5942
.range-slider {
60-
position: relative;
61-
6243
height: $range-md-slider-height;
63-
64-
cursor: pointer;
6544
}
6645

6746
.range-bar {

‎src/components/range/range.scss

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
@import "../../globals.core";
2+
3+
// Range
4+
// --------------------------------------------------
5+
6+
.item-range .item-inner {
7+
overflow: visible;
8+
}
9+
10+
.item-range .input-wrapper {
11+
overflow: visible;
12+
13+
flex-direction: column;
14+
}
15+
16+
.item-range ion-range {
17+
width: 100%;
18+
}
19+
20+
ion-range {
21+
position: relative;
22+
display: flex;
23+
align-items: center;
24+
25+
ion-label {
26+
flex: initial;
27+
}
28+
29+
ion-icon {
30+
min-height: 2.4rem;
31+
font-size: 2.4rem;
32+
line-height: 1;
33+
}
34+
}
35+
36+
.range-slider {
37+
position: relative;
38+
39+
flex: 1;
40+
41+
cursor: pointer;
42+
}

‎src/components/range/range.ts

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,13 @@ export class RangeKnob {
106106
* the slider knob. It can accept dual knobs, but by default one knob
107107
* controls the value of the range.
108108
*
109+
* ### Range Labels
110+
* Labels can be placed on either side of the range by adding the
111+
* `range-left` or `range-right` property to the element. The element
112+
* doesn't have to be an `ion-label`, it can be added to any element
113+
* to place it to the left or right of the range. See [usage](#usage)
114+
* below for examples.
115+
*
109116
*
110117
* ### Minimum and Maximum Values
111118
* Minimum and maximum values can be passed to the range through the `min`
@@ -135,15 +142,18 @@ export class RangeKnob {
135142
* </ion-item>
136143
*
137144
* <ion-item>
138-
* <ion-note item-left>-200</ion-note>
139-
* <ion-range min="-200" max="200" pin="true" [(ngModel)]="saturation" secondary></ion-range>
140-
* <ion-note item-right>200</ion-note>
145+
* <ion-range min="-200" max="200" [(ngModel)]="saturation" secondary>
146+
* <ion-label range-left>-200</ion-label>
147+
* <ion-label range-right>200</ion-label>
148+
* </ion-range>
141149
* </ion-item>
142150
*
143-
* <ion-item>
144-
* <ion-label>step=2, {{singleValue3}}</ion-label>
145-
* <ion-range min="20" max="80" step="2" [(ngModel)]="singleValue3"></ion-range>
146-
* </ion-item>
151+
* <ion-item>
152+
* <ion-range min="20" max="80" step="2" [(ngModel)]="brightness">
153+
* <ion-icon small range-left name="sunny"></ion-icon>
154+
* <ion-icon range-right name="sunny"></ion-icon>
155+
* </ion-range>
156+
* </ion-item>
147157
*
148158
* <ion-item>
149159
* <ion-label>step=100, snaps, {{singleValue4}}</ion-label>
@@ -163,13 +173,15 @@ export class RangeKnob {
163173
@Component({
164174
selector: 'ion-range',
165175
template:
176+
'<ng-content select="[range-left]"></ng-content>' +
166177
'<div class="range-slider" #slider>' +
167178
'<div class="range-tick" *ngFor="let t of _ticks" [style.left]="t.left" [class.range-tick-active]="t.active"></div>' +
168179
'<div class="range-bar"></div>' +
169180
'<div class="range-bar range-bar-active" [style.left]="_barL" [style.right]="_barR" #bar></div>' +
170181
'<div class="range-knob-handle"></div>' +
171182
'<div class="range-knob-handle" [upper]="true" *ngIf="_dual"></div>' +
172-
'</div>',
183+
'</div>' +
184+
'<ng-content select="[range-right]"></ng-content>',
173185
host: {
174186
'[class.range-disabled]': '_disabled',
175187
'[class.range-pressed]': '_pressed',

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

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -32,24 +32,7 @@ $range-wp-pin-font-size: 12px !default;
3232
$range-wp-pin-padding: 8px !default;
3333

3434

35-
.item-range .item-inner {
36-
overflow: visible;
37-
}
38-
39-
.item-range .input-wrapper {
40-
overflow: visible;
41-
42-
flex-direction: column;
43-
}
44-
45-
.item-range ion-range {
46-
width: 100%;
47-
}
48-
4935
ion-range {
50-
position: relative;
51-
display: block;
52-
5336
padding: $range-wp-padding-vertical $range-wp-padding-horizontal;
5437
}
5538

@@ -58,11 +41,7 @@ ion-range {
5841
}
5942

6043
.range-slider {
61-
position: relative;
62-
6344
height: $range-wp-slider-height;
64-
65-
cursor: pointer;
6645
}
6746

6847
.range-bar {

0 commit comments

Comments
 (0)