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

Description	レンジアクティブバーの開始位置です。この機能は、ノブが1つの場合のみ有効です（dualKnobs="false"）。有効な値は、min値以上、max値以下です。
Attribute	active-bar-start
Type	number ｜ undefined
Default	undefined

color

Description	アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", と "dark" です．色に関する詳しい情報は theming を参照してください。
Attribute	color
Type	"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined
Default	undefined

debounce

Description	範囲の値が変化するたびに ionChange イベントを起動するまでの待ち時間をミリ秒単位で指定します。これは ngModel や v-model のようなフォームバインディングにも影響します。
Attribute	debounce
Type	number
Default	0

disabled

Description	trueの場合、ユーザは範囲と対話することができません。
Attribute	disabled
Type	boolean
Default	false

dualKnobs

Description	2つのノブを表示します。
Attribute	dual-knobs
Type	boolean
Default	false

max

Description	範囲の最大整数値。
Attribute	max
Type	number
Default	100

min

Description	範囲の最小の整数値。
Attribute	min
Type	number
Default	0

mode

Description	modeは、どのプラットフォームのスタイルを使用するかを決定します。
Attribute	mode
Type	"ios" ｜ "md"
Default	undefined

name

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

pin

Description	trueの場合、ノブを押したときに整数値のピンが表示されます。
Attribute	pin
Type	boolean
Default	false

pinFormatter

Description	ピンのテキストをフォーマットするために使用されるコールバックです。デフォルトでは、ピンのテキストは Math.round(value) に設定されます。
Attribute	undefined
Type	(value: number) => string ｜ number
Default	(value: number): number => Math.round(value)

snaps

Description	trueの場合、ノブはステッププロパティの値に基づいて等間隔に配置されたティックマークにスナップします。
Attribute	snaps
Type	boolean
Default	false

step

Description	値の粒度を指定します。
Attribute	step
Type	number
Default	1

ticks

Description	trueの場合、ステップの値に基づいてティックマークを表示します。snapsが true` の場合のみ適用される。
Attribute	ticks
Type	boolean
Default	true

value

Description	範囲の値です。
Attribute	value
Type	number ｜ { lower: number; upper: number; }
Default	0

Events

Name	Description
ionBlur	レンジの焦点が合わなくなったときに発します。
ionChange	valueプロパティが変更されたときに発行されます。
ionFocus	レンジのフォーカスが合ったときに発します。
ionKnobMoveEnd	マウスドラッグ、タッチジェスチャー、キーボード操作など、ユーザーが範囲ノブの移動を終了したときに発行されます。
ionKnobMoveStart	マウスドラッグ、タッチジェスチャー、キーボード操作など、ユーザーがレンジノブの移動を開始したときに発行されます。

Methods

No public methods available for this component.

CSS Shadow Parts

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

CSS Custom Properties

Name	Description
--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

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