javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 20:33:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(range): fix styling on range, add demo

Browse Source 
references #5422
This commit is contained in:
Brandy Carney
2016-05-31 14:37:43 -04:00
parent f239b72be4
commit d24b080cb7
6 changed files with 85 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
demos/range/index.ts Normal file
View File

@ -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
demos/range/main.html Normal file
View File

@ -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>