ionic/demos/src/range/page.html at master · CssFormWork/ionic · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<ion-header>

  <ion-navbar>
    <ion-title>Range</ion-title>
  </ion-navbar>

</ion-header>


<ion-content class="outer-content">

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

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

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

  <ion-list>
    <ion-list-header>
      Structure
      <ion-badge item-right color="dark">{{structure.lower}}</ion-badge>
      <ion-badge item-right color="dark">{{structure.upper}}</ion-badge>
    </ion-list-header>
    <ion-item>
      <ion-range dualKnobs="true" pin="true" [(ngModel)]="structure" (ionChange)="onChange($event)" color="dark">
        <ion-label range-left>-0</ion-label>
        <ion-label range-right>100</ion-label>
      </ion-range>
    </ion-item>
  </ion-list>

</ion-content>

<style>
  ion-list + ion-list {
    margin-top: 0;
  }
</style>