Range

ion-range

Improve this doc

The Range slider lets users select from a range of values by moving the slider knob. It can accept dual knobs, but by default one knob controls the value of the range.

Range Labels

Labels can be placed on either side of the range by adding the range-left or range-right property to the element. The element doesn't have to be an ion-label, it can be added to any element to place it to the left or right of the range. See usage below for examples.

Minimum and Maximum Values

Minimum and maximum values can be passed to the range through the min and max properties, respectively. By default, the range sets the min to 0 and the max to 100.

Steps and Snaps

The step property specifies the value granularity of the range's value. It can be useful to set the step when the value isn't in increments of 1. Setting the step property will show tick marks on the range for each step. The snaps property can be set to automatically move the knob to the nearest tick mark based on the step property value.

Dual Knobs

Setting the dualKnobs property to true on the range component will enable two knobs on the range. If the range has two knobs, the value will be an object containing two properties: lower and upper.

Usage

<ion-list>
  <ion-item>
    <ion-range [(ngModel)]="singleValue" color="danger" pin="true"></ion-range>
  </ion-item>

  <ion-item>
    <ion-range min="-200" max="200" [(ngModel)]="saturation" color="secondary">
      <ion-label range-left>-200</ion-label>
      <ion-label range-right>200</ion-label>
    </ion-range>
  </ion-item>

 <ion-item>
   <ion-range min="20" max="80" step="2" [(ngModel)]="brightness">
     <ion-icon small range-left name="sunny"></ion-icon>
     <ion-icon range-right name="sunny"></ion-icon>
   </ion-range>
 </ion-item>

  <ion-item>
    <ion-label>step=100, snaps, </ion-label>
    <ion-range min="1000" max="2000" step="100" snaps="true" color="secondary" [(ngModel)]="singleValue4"></ion-range>
  </ion-item>

  <ion-item>
    <ion-label>dual, step=3, snaps, </ion-label>
    <ion-range dualKnobs="true" [(ngModel)]="dualValue2" min="21" max="72" step="3" snaps="true"></ion-range>
  </ion-item>
</ion-list>

Instance Members

ratio

Returns the ratio of the knob’s is current location, which is a number between 0 and 1. If two knobs are used, this property represents the lower value.

ratioUpper

Returns the ratio of the upper value’s is current location, which is a number between 0 and 1. If there is only one knob, then this will return null.

Input Properties

Output Events

Sass Variables