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.

Labels

Labels should be used to describe the range. They can be used visually, and they will also be read out by screen readers when the user is focused on the range. This makes it easy for the user to understand the intent of the range. Range has several ways to assign a label:

• label property: used for plaintext labels
• label slot: used for custom HTML labels
• aria-label: used to provide a label for screen readers but adds no visible label

Label Placement

The below demo shows how to use the labelPlacement property to change the position of the label relative to the range. While the label property is used here, labelPlacement can also be used with the label slot.

Label Slot

While plaintext labels should be passed in via the label property, if custom HTML is needed, it can be passed through the label slot instead.

No Visible Label

If no visible label is needed, developers should still supply an aria-label so the range is accessible to screen readers.

Decorations

Decorative elements can be passed into the start or end slots of the range. This is useful for adding icons such as low volume or high volume icons. Since these elements are decorative, they should not be announced by assistive technology such as screen readers.

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.

Console

Console messages will appear here when logged from the example above.

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.

Console

Console messages will appear here when logged from the example above.

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	Rangeアクティブバーの開始位置です。この機能は、ノブが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 ｜ undefined
Default	undefined

debounce

Description	Rangeの値が変化するたびに ionInput イベントをトリガーするまでの待ち時間（ミリ秒単位）。
Attribute	debounce
Type	number ｜ undefined
Default	undefined

disabled

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

dualKnobs

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

label

Description	コントロールのラベルとして表示するテキスト。プレーンテキストのみが必要な場合は label スロットよりもこちらを使用する。両方を使用する場合は、label プロパティが label スロットよりも優先される。
Attribute	label
Type	string ｜ undefined
Default	undefined

labelPlacement

Description	範囲に対するラベルの位置。start"：ラベルはLTRでは範囲の左側、RTLでは右側に表示される。end"：ラベルはLTRでは範囲の右側、RTLでは左側に表示される。fixed"：ラベルの幅が固定される以外は "start" と同じ動作をします。長いテキストは省略記号("...")で切り捨てられます。積み上げ"：ラベルは方向に関係なく範囲の上に表示されます。
Attribute	label-placement
Type	"end" ｜ "fixed" ｜ "stacked" ｜ "start"
Default	'start'

max

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

min

Description	範囲の最小の整数値。 This is a virtual property that is set once during initialization and will not update if you change its value after the initial render.
Attribute	min
Type	number
Default	0

mode

Description	modeは、どのプラットフォームのスタイルを使用するかを決定します。 This is a virtual property that is set once during initialization and will not update if you change its value after the initial render.
Attribute	mode
Type	"ios" ｜ "md"
Default	undefined

name

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

pin

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

pinFormatter

Description	ピンのテキストをフォーマットするためのコールバック。デフォルトでは、ピンのテキストは Math.round(value) に設定されます。 コールバック内から this にアクセスする必要がある場合は https://ionicframework.com/docs/troubleshooting/runtime#accessing-this を参照してください。
Attribute	pin-formatter
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	Bubbles
ionBlur	Rangeの焦点が合わなくなったときに発行されます。	true
ionChange	ionChange イベントは <ion-range> 要素に対して、ユーザがその要素の値を変更したときに発生します。 ・ユーザがドラッグした後にノブを離したとき ・ユーザがキーボードの矢印でノブを移動したとき このイベントはプログラムでvalueプロパティを設定したときには発生しません。	true
ionFocus	Rangeのフォーカスが合ったときに発行されます。	true
ionInput	ionInputイベントは、<ion-range>要素に対して、値が変更されたときに発生するイベントです。ionChangeとは異なり、ionInputはユーザがノブをドラッグしている間、継続して発生します。	true
ionKnobMoveEnd	マウスドラッグ、タッチジェスチャー、キーボード操作など、ユーザーが範囲ノブの移動を終了したときに発行されます。	true
ionKnobMoveStart	マウスドラッグ、タッチジェスチャー、キーボード操作など、ユーザーがRangeノブの移動を開始したときに発行されます。	true

Methods

No public methods available for this component.

CSS Shadow Parts

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

CSS Custom Properties

iOS

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

MD

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

Slots

Name	Description
end	コンテンツは、LTRでは範囲スライダーの右側に、RTLでは左側に配置されます。
label	範囲に関連付けるラベルテキスト。"labelPlacement"プロパティを使用して、ラベルが範囲に対してどの位置に配置されるかを制御します。
start	コンテンツは、LTRでは範囲スライダーの左側に、RTLでは右側に配置されます。