Skip to content

Commit

Permalink
fix(range): fix styling on range, add demo
Browse files Browse the repository at this point in the history
references #5422
  • Loading branch information
brandyscarney committed May 31, 2016
1 parent f239b72 commit d24b080
Show file tree
Hide file tree
Showing 6 changed files with 85 additions and 6 deletions.
15 changes: 15 additions & 0 deletions demos/range/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import {App} from 'ionic-angular';

@App({
templateUrl: 'main.html'
})
class ApiDemoApp {
brightness: number = 20;
saturation: number = 0;
warmth: number = 1300;
structure: any = {lower: 33, upper: 60};

onChange(ev) {
console.log("Changed", ev);
}
}
54 changes: 54 additions & 0 deletions demos/range/main.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<ion-toolbar>
<ion-title>Range</ion-title>
</ion-toolbar>

<ion-content class="outer-content">
<ion-list>
<ion-list-header>
Brightness
<ion-badge item-right>{{brightness}}</ion-badge>
</ion-list-header>
<ion-item>
<ion-icon item-left small name="sunny"></ion-icon>
<ion-range [(ngModel)]="brightness"></ion-range>
<ion-icon item-right name="sunny"></ion-icon>
</ion-item>
</ion-list>

<ion-list>
<ion-list-header>
Saturation
<ion-badge item-right secondary>{{saturation}}</ion-badge>
</ion-list-header>
<ion-item>
<ion-note item-left>-200</ion-note>
<ion-range min="-200" max="200" pin="true" [(ngModel)]="saturation" secondary></ion-range>
<ion-note item-right>200</ion-note>
</ion-item>
</ion-list>

<ion-list>
<ion-list-header>
Warmth
<ion-badge item-right danger>{{warmth}}</ion-badge>
</ion-list-header>
<ion-item>
<ion-icon item-left small danger name="thermometer"></ion-icon>
<ion-range min="1000" max="2000" step="100" snaps="true" [(ngModel)]="warmth" danger></ion-range>
<ion-icon item-right danger name="thermometer"></ion-icon>
</ion-item>
</ion-list>

<ion-list>
<ion-list-header>
Structure
<ion-badge item-right dark>{{structure.lower}}</ion-badge>
<ion-badge item-right dark>{{structure.upper}}</ion-badge>
</ion-list-header>
<ion-item>
<ion-note item-left>0</ion-note>
<ion-range dualKnobs="true" pin="true" [(ngModel)]="structure" (ionChange)="onChange($event)" dark></ion-range>
<ion-note item-right>100</ion-note>
</ion-item>
</ion-list>
</ion-content>
4 changes: 2 additions & 2 deletions src/components/range/range.ios.scss
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,6 @@ ion-range {
position: relative;
display: block;

margin-top: -8px;
padding: $range-ios-padding;
}

Expand Down Expand Up @@ -173,7 +172,8 @@ ion-range {
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {

ion-range[#{$color-name}] {
.range-bar-active {
.range-bar-active,
.range-tick-active {
background: $color-base;
}
}
Expand Down
1 change: 0 additions & 1 deletion src/components/range/range.md.scss
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ ion-range {
position: relative;
display: block;

margin-top: -16px;
padding: $range-md-padding;
}

Expand Down
16 changes: 14 additions & 2 deletions src/components/range/range.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,19 @@ import {pointerCoord} from '../../util/dom';
const RANGE_VALUE_ACCESSOR = new Provider(
NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => Range), multi: true});


/**
* @name Range
* @description
* The Range slider lets users select from a range of values by moving
* the slider knob.
*
*
*
*
*
*
* @demo /docs/v2/demos/range/
*/
@Component({
selector: '.range-knob-handle',
template:
Expand Down Expand Up @@ -231,7 +243,7 @@ export class Range {
/**
* @output {Range} Expression to evaluate when the range value changes.
*/
@Output() rangeChange: EventEmitter<Range> = new EventEmitter();
@Output() ionChange: EventEmitter<Range> = new EventEmitter();


constructor(
Expand Down
1 change: 0 additions & 1 deletion src/components/range/range.wp.scss
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,6 @@ ion-range {
position: relative;
display: block;

margin-top: -16px;
padding: $range-wp-padding;
}

Expand Down

0 comments on commit d24b080

Please sign in to comment.