ion-range

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 slot="start" or slot="end" 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.

Usage

<ion-list>
  <ion-item>
    <ion-range color="danger" pin="true"></ion-range>
  </ion-item>

  <ion-item>
    <ion-range min="-200" max="200" color="secondary">
      <ion-label slot="start">-200</ion-label>
      <ion-label slot="end">200</ion-label>
    </ion-range>
  </ion-item>

  <ion-item>
    <ion-range min="20" max="80" step="2">
      <ion-icon size="small" slot="start" name="sunny"></ion-icon>
      <ion-icon slot="end" name="sunny"></ion-icon>
    </ion-range>
  </ion-item>

  <ion-item>
    <ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
  </ion-item>

  <ion-item>
    <ion-range min="1000" max="2000" step="100" snaps="true" ticks="false" color="secondary"></ion-range>
  </ion-item>

  <ion-item>
    <ion-range dualKnobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
  </ion-item>
</ion-list>

<ion-list>
  <ion-item>
    <ion-range color="danger" pin="true"></ion-range>
  </ion-item>

  <ion-item>
    <ion-range min="-200" max="200" color="secondary">
      <ion-label slot="start">-200</ion-label>
      <ion-label slot="end">200</ion-label>
    </ion-range>
  </ion-item>

  <ion-item>
    <ion-range min="20" max="80" step="2">
      <ion-icon size="small" slot="start" name="sunny"></ion-icon>
      <ion-icon slot="end" name="sunny"></ion-icon>
    </ion-range>
  </ion-item>

  <ion-item>
    <ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
  </ion-item>

  <ion-item>
    <ion-range min="1000" max="2000" step="100" snaps="true" ticks="false" color="secondary"></ion-range>
  </ion-item>

  <ion-item>
    <ion-range dual-knobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
  </ion-item>
</ion-list>

import React from 'react';
import { IonList, IonItem, IonRange, IonLabel, IonIcon, IonContent } from '@ionic/react';

export const RangeExample: React.FC = () => (
  <IonContent>
    <IonList>
      <IonItem>
        <IonRange color="danger" pin={true} />
      </IonItem>

      <IonItem>
        <IonRange min={-200} max={200} color="secondary">
          <IonLabel slot="start">-200</IonLabel>
          <IonLabel slot="end">200</IonLabel>
        </IonRange>
      </IonItem>

      <IonItem>
        <IonRange min={20} max={80} step={2}>
          <IonIcon size="small" slot="start" name="sunny" />
          <IonIcon slot="end" name="sunny" />
        </IonRange>
      </IonItem>

      <IonItem>
        <IonRange min={1000} max={2000} step={100} snaps={true} color="secondary" />
      </IonItem>

      <IonItem>
        <IonRange min={1000} max={2000} step={100} snaps={true} ticks={false} color="secondary" />
      </IonItem>

      <IonItem>
        <IonRange dualKnobs={true} min={21} max={72} step={3} snaps={true} />
      </IonItem>
    </IonList>
  </IonContent>
);

<template>
  <ion-list>
    <ion-item>
      <ion-range color="danger" pin="true"></ion-range>
    </ion-item>

    <ion-item>
      <ion-range min="-200" max="200" color="secondary">
        <ion-label slot="start">-200</ion-label>
        <ion-label slot="end">200</ion-label>
      </ion-range>
    </ion-item>

    <ion-item>
      <ion-range min="20" max="80" step="2">
        <ion-icon size="small" slot="start" name="sunny"></ion-icon>
        <ion-icon slot="end" name="sunny"></ion-icon>
      </ion-range>
    </ion-item>

    <ion-item>
      <ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
    </ion-item>

    <ion-item>
      <ion-range min="1000" max="2000" step="100" snaps="true" ticks="false" color="secondary"></ion-range>
    </ion-item>

    <ion-item>
      <ion-range ref="rangeDualKnobs" dual-knobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
    </ion-item>
  </ion-list>
</template>

<script>
export default {
  mounted() {
    // Sets initial value for dual-knob ion-range
    this.$refs.rangeDualKnobs.value = { lower: 24, upper: 42 };
  }
}
</script>

Properties

color
Description	The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see theming.
Attribute	`color`
Type	`string \| undefined`
debounce
Description	How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value.
Attribute	`debounce`
Type	`number`
Default	`0`
disabled
Description	If `true`, the user cannot interact with the range.
Attribute	`disabled`
Type	`boolean`
Default	`false`
dualKnobs
Description	Show two knobs.
Attribute	`dual-knobs`
Type	`boolean`
Default	`false`
max
Description	Maximum integer value of the range.
Attribute	`max`
Type	`number`
Default	`100`
min
Description	Minimum integer value of the range.
Attribute	`min`
Type	`number`
Default	`0`
mode
Description	The mode determines which platform styles to use.
Attribute	`mode`
Type	`"ios" \| "md"`
name
Description	The name of the control, which is submitted with the form data.
Attribute	`name`
Type	`string`
Default	`''`
pin
Description	If `true`, a pin with integer value is shown when the knob is pressed.
Attribute	`pin`
Type	`boolean`
Default	`false`
snaps
Description	If `true`, the knob snaps to tick marks evenly spaced based on the step property value.
Attribute	`snaps`
Type	`boolean`
Default	`false`
step
Description	Specifies the value granularity.
Attribute	`step`
Type	`number`
Default	`1`
ticks
Description	If `true`, tick marks are displayed based on the step value. Only applies when `snaps` is `true`.
Attribute	`ticks`
Type	`boolean`
Default	`true`
value
Description	the value of the range.
Attribute	`value`
Type	`number \| { lower: number; upper: number; }`
Default	`0`

Events

Name	Description
`ionBlur`	Emitted when the range loses focus.
`ionChange`	Emitted when the value property has changed.
`ionFocus`	Emitted when the range has focus.

CSS Custom Properties

Name	Description
`--bar-background`	Background of the range bar
`--bar-background-active`	Background of the active range bar
`--bar-border-radius`	Border radius of the range bar
`--bar-height`	Height of the range bar
`--height`	Height of the range
`--knob-background`	Background of the range knob
`--knob-border-radius`	Border radius of the range knob
`--knob-box-shadow`	Box shadow of the range knob
`--knob-size`	Size of the range knob
`--pin-background`	Background of the range pin
`--pin-color`	Color of the range pin

Slots

Name	Description
`"end"`	Content is placed to the right of the range slider in LTR, and to the left in RTL.
`"start"`	Content is placed to the left of the range slider in LTR, and to the right in RTL.

ion-range

Range Labels

Usage

Properties

color

debounce

disabled

dualKnobs

max

min

mode

name

pin

snaps

step

ticks

value

Events

CSS Custom Properties

Slots