ion-range

shadow

Rangeスライダは、スライダノブを動かして、ユーザーが値の範囲を選択できるようにするものです。デフォルトでは、1つのノブがレンジの値を制御します。この動作は dual knobs を使ってカスタマイズすることができます。

デフォルトでは、Rangeスライダーの最小値は0、最大値は100です。これは min と max プロパティで設定することができます。

Labels

ラベルは、範囲を説明するために使用されるべきです。それらは視覚的に使用することができ、また、ユーザーがRangeをフォーカスしてるときに、スクリーンリーダーによって読み上げられます。これにより、ユーザーは範囲の意図を理解しやすくなります。範囲にはラベルを割り当てるいくつかの方法があります：

• labelプロパティ：プレーンテキストのラベルに使用する。
• labelスロット：カスタム HTML ラベルに使用する。
• aria-label: スクリーンリーダー用のラベルとして使用されるが、ラベルは表示されない。

Label Placement

以下のデモでは、labelPlacement プロパティを使用して、範囲に対するラベルの位置を変更しています。ここでは label プロパティを使用しているが、labelPlacement は label スロットでも使用できます。

Label Slot

プレーンテキストのラベルは label プロパティで渡すべきであるが、カスタムHTMLが必要な場合は、代わりに label スロットで渡すことができます。

No Visible Label

もし表示するラベルが必要ない場合でも、開発者はaria-labelを与えるべきです。

Decorations

装飾的な要素は、範囲の start または end スロットに渡すことができます。これは、音量の小さいアイコンや大きいアイコンのようなアイコンを追加するのに便利です。これらの要素は装飾的なものなので、スクリーンリーダーのような支援技術によってアナウンスされるべきではありません。

ドキュメントの方向性が左から右に設定されている場合、start位置にスロットされたコンテンツは範囲の左に表示され、end位置にスロットされたコンテンツは範囲の右に表示されます。右から左(rtl)の方向性の場合、start位置にスロットされたコンテンツは範囲の右側に表示され、end位置にスロットされたコンテンツは範囲の左側に表示されます。

Dual Knobs

Dual knobs はユーザーが下限と上限の値を選択するために使用できる2つのknobsコントロールを導入しています。選択されると、Range は選択された上下限の値を含む RangeValue を持つ ionChange イベントを発信します。

ピン

pin 属性は、ドラッグしたときにノブの上にレンジの値を表示します。これにより、ユーザはRange内の特定の値を選択することができます。

pinFormatter 関数を使用すると、開発者はユーザーに対してレンジの値のフォーマットをカスタマイズすることができます。

Snapping & Ticks

TicksはRange 上で利用可能な各値のインジケータを表示します。Ticksを使用するためには、開発者は snaps と ticks プロパティの両方を true に設定する必要があります。

snapsを有効にし、knobをドラッグして放すと、Range knobは最も近い利用可能な値にスナップします。

イベントハンドリング

Using ionChange

ionChange イベントはRange knobの値の変更を監視します。

Console

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

ionKnobMoveStart と ionKnobMoveEnd を使う

マウスドラッグ、タッチジェスチャー、キーボード操作のいずれであっても、Range knobのドラッグが開始されると ionKnobMoveStart イベントが発行されます。逆に、ionKnobMoveEndはRange knobがリリースされたときに発生します。両イベントは RangeValue タイプで発生し、dualKnobs プロパティと組み合わせて動作します。

Console

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

テーマ

CSSカスタムプロパティ

Rangeには、アプリケーションのデザインに合わせてRangeコンポーネントの外観を素早くテーマ化してカスタマイズするためのCSS Variablesが含まれています。

CSS Shadow Parts

Rangeには CSS Shadow Parts があり、Rangeコンポーネント内の特定の要素ノードを完全にカスタマイズすることができます。CSS Shadow Partsは最も多くのカスタマイズ機能を提供し、Rangeコンポーネントで高度なスタイリングが必要な場合に推奨されるアプローチです。

When dualKnobs is enabled, additional Shadow Parts are exposed to allow each knob to be styled independently. These are available in two forms: static identity parts (A and B) and dynamic position parts (lower and upper). The A and B parts always refer to the same physical knobs, even if the knobs cross. In contrast, the lower and upper parts reflect the current value position and automatically swap if the knobs cross. This allows styling by consistent identity or by relative value within the range.

Interfaces

RangeChangeEventDetail

interface RangeChangeEventDetail {
  value: RangeValue;
}

RangeKnobMoveStartEventDetail

interface RangeKnobMoveStartEventDetail {
  value: RangeValue;
}

RangeKnobMoveEndEventDetail

interface RangeKnobMoveEndEventDetail {
  value: RangeValue;
}

RangeCustomEvent

必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、CustomEvent インターフェースの代わりにこのインターフェースを使用することが可能です。

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

Types

RangeValue

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

プロパティ

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

イベント

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

メソッド

No public methods available for this component.

CSS Shadow Parts

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

CSSカスタムプロパティ

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では右側に配置されます。