Skip to main content
Version: v6

ion-range

shadow

The Range slider lets users select from a range of values by moving the slider knob. By default one knob controls the value of the range. This behavior can be customized using dual knobs.

By default the Range slider has a minimum value of 0 and a maximum value of 100. This can be configured with the min and max properties.

Basic Usage

Range Labels

Labels and custom UI elements can be slotted on either side of the range by adding slot="start" or slot="end" to the element. The element can be any element, such as an ion-label, ion-icon or a div. If the directionality of the document is set to left to right, the contents slotted to the start position will display to the left of the range, where as contents slotted to the end position will display to the right of the range. In right to left (rtl) directionality, the contents slotted to the start position will display to the right of the range, where as contents slotted to the end position` will display to the left of the range.

Dual Knobs

Dual knobs introduce two knob controls that users can use to select a value at a lower and upper bounds. When selected, the Range will emit an ionChange event with a RangeValue, containing the upper and lower values selected.

Pins

The pin attribute will display the value of the Range above the knob when dragged. This allows users to select a specific value within the Range.

With the pinFormatter function, developers can customize the formatting of the range value to the user.

Snapping & Ticks

Ticks show indications for each available value on the Range. In order to use ticks, developers must set both snaps and the ticks property to true.

With snapping enabled, the Range knob will snap to the nearest available value as the knob is dragged and released.

Event Handling

Using ionChange

The ionChange event emits as the Range knob value changes.

Using ionKnobMoveStart and ionKnobMoveEnd

The ionKnobMoveStart event emits when the Range knob begins dragging, whether through mouse drag, touch gesture or keyboard interaction. Inversely, ionKnobMoveEnd emits when the Range knob is released. Both events emit with the RangeValue type and work in combination with the dualKnobs property.

Theming

CSS Custom Properties

Range includes CSS Variables to quickly theme and customize the appearance of the Range component to match your application's design.

CSS Shadow Parts

Range includes CSS Shadow Parts to allow complete customization of specific element nodes within the Range component. CSS Shadow Parts offer the most customization capabilities and are the recommended approach when requiring advance styling with the Range component.

Interfaces

RangeChangeEventDetail

interface RangeChangeEventDetail {
value: RangeValue;
}

RangeKnobMoveStartEventDetail

interface RangeKnobMoveStartEventDetail {
value: RangeValue;
}

RangeKnobMoveEndEventDetail

interface RangeKnobMoveEndEventDetail {
value: RangeValue;
}

RangeCustomEvent

While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.

interface RangeCustomEvent extends CustomEvent {
detail: RangeChangeEventDetail;
target: HTMLIonRangeElement;
}

Types

RangeValue

type RangeValue = number | { lower: number; upper: number };

Properties

activeBarStart

DescriptionThe start position of the range active bar. This feature is only available with a single knob (dualKnobs="false"). Valid values are greater than or equal to the min value and less than or equal to the max value.
Attributeactive-bar-start
Typenumber | undefined
Defaultundefined

color

DescriptionThe 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
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined
Defaultundefined

debounce

DescriptionHow long, in milliseconds, to wait to trigger the ionChange event after each change in the range value. This also impacts form bindings such as ngModel or v-model.
Attributedebounce
Typenumber
Default0

disabled

Descriptiontrueの場合、ユーザは範囲と対話することができません。
Attributedisabled
Typeboolean
Defaultfalse

dualKnobs

Description2つのノブを表示します。
Attributedual-knobs
Typeboolean
Defaultfalse

max

Description範囲の最大整数値。
Attributemax
Typenumber
Default100

min

Description範囲の最小の整数値。
Attributemin
Typenumber
Default0

mode

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。
Attributemode
Type"ios" | "md"
Defaultundefined

name

Descriptionフォームデータとともに送信されるコントロールの名前。
Attributename
Typestring
Default''

pin

DescriptionIf true, a pin with integer value is shown when the knob is pressed.
Attributepin
Typeboolean
Defaultfalse

pinFormatter

DescriptionA callback used to format the pin text. By default the pin text is set to Math.round(value).
Attributeundefined
Type(value: number) => string | number
Default(value: number): number => Math.round(value)

snaps

DescriptionIf true, the knob snaps to tick marks evenly spaced based on the step property value.
Attributesnaps
Typeboolean
Defaultfalse

step

Description値の粒度を指定します。
Attributestep
Typenumber
Default1

ticks

DescriptionIf true, tick marks are displayed based on the step value. Only applies when snaps is true.
Attributeticks
Typeboolean
Defaulttrue

value

Description範囲の値です。
Attributevalue
Typenumber | { lower: number; upper: number; }
Default0

Events

NameDescription
ionBlurレンジの焦点が合わなくなったときに発行されます。
ionChangevalueプロパティが変更されたときに発行されます。
ionFocusレンジのフォーカスが合ったときに発行されます。
ionKnobMoveEndEmitted when the user finishes moving the range knob, whether through mouse drag, touch gesture, or keyboard interaction.
ionKnobMoveStartEmitted when the user starts moving the range knob, whether through mouse drag, touch gesture, or keyboard interaction.

Methods

No public methods available for this component.

CSS Shadow Parts

NameDescription
barバーの非アクティブな部分。
bar-activeバーのアクティブな部分です。
knob範囲をドラッグする際に使用するハンドル。
pinノブの上に表示されるカウンターです。
tick非アクティブなティックマークです。
tick-activeアクティブなティックマークです。

CSS Custom Properties

NameDescription
--bar-backgroundレンジバーの背景
--bar-background-activeアクティブレンジバーの背景
--bar-border-radiusレンジバーのボーダー半径
--bar-heightレンジバーの高さ
--heightレンジの高さ
--knob-backgroundレンジノブの背景
--knob-border-radiusレンジツマミのボーダー半径
--knob-box-shadowレンジノブのボックスシャドウ
--knob-sizeレンジツマミの大きさ
--pin-backgroundレンジピンの背景(MD mode時のみ有効)
--pin-colorレンジピンの色(MD mode時のみ有効)

Slots

NameDescription
endコンテンツは、LTRでは範囲スライダーの右側に、RTLでは左側に配置されます。
startコンテンツは、LTRでは範囲スライダーの左側に、RTLでは右側に配置されます。