Search docs/

ion-range

Contents

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.

Attributecolor
Typestring | undefined

debounce

Description

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

Attributedebounce
Typenumber
Default0

disabled

Description

If true, the user cannot interact with the range.

Attributedisabled
Typeboolean
Defaultfalse

dualKnobs

Description

Show two knobs.

Attributedual-knobs
Typeboolean
Defaultfalse

max

Description

Maximum integer value of the range.

Attributemax
Typenumber
Default100

min

Description

Minimum integer value of the range.

Attributemin
Typenumber
Default0

mode

Description

The mode determines which platform styles to use.

Attributemode
Type"ios" | "md"

name

Description

The name of the control, which is submitted with the form data.

Attributename
Typestring
Default''

pin

Description

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

Attributepin
Typeboolean
Defaultfalse

snaps

Description

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

Attributesnaps
Typeboolean
Defaultfalse

step

Description

Specifies the value granularity.

Attributestep
Typenumber
Default1

ticks

Description

If true, tick marks are displayed based on the step value. Only applies when snaps is true.

Attributeticks
Typeboolean
Defaulttrue

value

Description

the value of the range.

Attributevalue
Typenumber | { lower: number; upper: number; }
Default0

Events

NameDescription
ionBlurEmitted when the range loses focus.
ionChangeEmitted when the value property has changed.
ionFocusEmitted when the range has focus.

CSS Custom Properties

NameDescription
--bar-backgroundBackground of the range bar
--bar-background-activeBackground of the active range bar
--bar-border-radiusBorder radius of the range bar
--bar-heightHeight of the range bar
--heightHeight of the range
--knob-backgroundBackground of the range knob
--knob-border-radiusBorder radius of the range knob
--knob-box-shadowBox shadow of the range knob
--knob-sizeSize of the range knob
--pin-backgroundBackground of the range pin
--pin-colorColor of the range pin

Slots

NameDescription
"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.
View Source