Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

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

Attr Type Details
color string

The color to use from your Sass $colors map. Default options are: "primary", "secondary", "danger", "light", and "dark". For more information, see Theming your App.

debounce number

How long, in milliseconds, to wait to trigger the ionChange event after each change in the range value. Default 0.

disabled boolean

If true, the user cannot interact with this element.

dualKnobs boolean

Show two knobs. Defaults to false.

max number

Maximum integer value of the range. Defaults to 100.

min number

Minimum integer value of the range. Defaults to 0.

mode string

The mode determines which platform styles to use. Possible values are: "ios", "md", or "wp". For more information, see Platform Styles.

pin boolean

If true, a pin with integer value is shown when the knob is pressed. Defaults to false.

snaps boolean

If true, the knob snaps to tick marks evenly spaced based on the step property value. Defaults to false.

step number

Specifies the value granularity. Defaults to 1.

Output Events

Attr Details
ionBlur

Emitted when the range selector drag ends.

ionChange

Emitted when the range value changes.

ionFocus

Emitted when the range selector drag starts.

Sass Variables

Property Default Description
$range-ios-padding-vertical 8px

Padding top/bottom of the range

$range-ios-padding-horizontal 16px

Padding left/right of the range

$range-ios-slider-height 42px

Height of the range slider

$range-ios-hit-width 42px

Width of the area that will select the range knob

$range-ios-hit-height $range-ios-slider-height

Height of the area that will select the range knob

$range-ios-bar-height 1px

Height of the range bar

$range-ios-bar-background-color #bdbdbd

Background of the range bar

$range-ios-bar-active-background-color color($colors-ios, primary)

Background of the active range bar

$range-ios-knob-width 28px

Width of the range knob

$range-ios-knob-height $range-ios-knob-width

Height of the range knob

$range-ios-knob-box-shadow 0 3px 1px rgba(0, 0, 0, .1), 0 4px 8px rgba(0, 0, 0, .13), 0 0 0 1px rgba(0, 0, 0, .02)

Box shadow of the range knob

$range-ios-knob-border-radius 50%

Border radius of the range knob

$range-ios-knob-background-color #fff

Background of the range knob

$range-ios-tick-width $range-ios-bar-height

Width of the range tick

$range-ios-tick-height 8px

Height of the range tick

$range-ios-tick-border-radius 0

Border radius of the range tick

$range-ios-tick-background-color $range-ios-bar-background-color

Background of the range tick

$range-ios-tick-active-background-color $range-ios-bar-active-background-color

Background of the active range tick

$range-ios-pin-background-color transparent

Background of the range pin

$range-ios-pin-color $text-ios-color

Color of the range pin

$range-ios-pin-font-size 12px

Font size of the range pin

$range-ios-pin-padding 8px

Padding of the range pin

Property Default Description
$range-md-padding-vertical 8px

Padding top/bottom of the range

$range-md-padding-horizontal 8px

Padding left/right of the range

$range-md-slider-height 42px

Height of the range slider

$range-md-hit-width 42px

Width of the area that will select the range knob

$range-md-hit-height $range-md-slider-height

Height of the area that will select the range knob

$range-md-bar-height 2px

Height of the range bar

$range-md-bar-background-color #bdbdbd

Background of the range bar

$range-md-bar-active-background-color color($colors-md, primary)

Background of the active range bar

$range-md-knob-width 18px

Width of the range knob

$range-md-knob-height $range-md-knob-width

Height of the range knob

$range-md-knob-background-color $range-md-bar-active-background-color

Background of the range knob

$range-md-knob-min-background-color $background-md-color

Background of the range knob when the value is the minimum

$range-md-knob-min-border 2px solid $range-md-bar-background-color

Border of the range knob when the value is the minimum

$range-md-tick-width 2px

Width of the range tick

$range-md-tick-height $range-md-tick-width

Height of the range tick

$range-md-tick-border-radius 50%

Border radius of the range tick

$range-md-tick-background-color #000

Background of the range tick

$range-md-tick-active-background-color $range-md-tick-background-color

Background of the active range tick

$range-md-pin-background-color $range-md-bar-active-background-color

Background of the range pin

$range-md-pin-color color-contrast($colors-md, $range-md-bar-active-background-color)

Color of the range pin

$range-md-pin-font-size 12px

Font size of the range pin

$range-md-pin-padding-vertical 8px

Padding top/bottom of the range pin

$range-md-pin-padding-horizontal 0

Padding left/right of the range pin

$range-md-pin-min-background-color $range-md-bar-background-color

Background of the range pin when the value is the minimum

Property Default Description
$range-wp-padding-vertical 8px

Padding top/bottom of the range

$range-wp-padding-horizontal 8px

Padding left/right of the range

$range-wp-slider-height 42px

Height of the range slider

$range-wp-hit-width 42px

Width of the area that will select the range knob

$range-wp-hit-height $range-wp-slider-height

Height of the area that will select the range knob

$range-wp-bar-height 2px

Height of the range bar

$range-wp-bar-background-color #bdbdbd

Background of the range bar

$range-wp-bar-active-background-color color($colors-wp, primary)

Background of the active range bar

$range-wp-knob-width 8px

Width of the range knob

$range-wp-knob-height $range-wp-knob-width * 3

Height of the range knob

$range-wp-knob-background-color $range-wp-bar-active-background-color

Background of the range knob

$range-wp-knob-border-radius $range-wp-knob-width / 2

Border radius of the range knob

$range-wp-tick-width $range-wp-bar-height

Width of the range tick

$range-wp-tick-height $range-wp-tick-width * 3

Height of the range tick

$range-wp-tick-border-radius $range-wp-knob-width / 2

Border radius of the range tick

$range-wp-tick-background-color $range-wp-bar-background-color

Background of the range tick

$range-wp-tick-active-background-color $range-wp-bar-active-background-color

Background of the active range tick

$range-wp-pin-background-color $range-wp-bar-active-background-color

Background of the range pin

$range-wp-pin-color color-contrast($colors-wp, $range-wp-bar-active-background-color)

Color of the range pin

$range-wp-pin-font-size 12px

Font size of the range pin

$range-wp-pin-padding 8px

Padding of the range pin

API

Native

General