メインコンテンツまでスキップ
バージョン: v8 (beta)

ion-range

shadow

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

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

Labels

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

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

Label Placement

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

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を使用するためには、開発者は snapsticks プロパティの両方を true に設定する必要があります。

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

イベントハンドリング

Using ionChange

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

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

ionKnobMoveStartionKnobMoveEnd を使う

マウスドラッグ、タッチジェスチャー、キーボード操作のいずれであっても、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コンポーネントで高度なスタイリングが必要な場合に推奨されるアプローチです。

レガシーな範囲構文からの移行

Ionic 7.0では、よりシンプルな範囲構文が導入されました。この新しい構文は、範囲を設定するために必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。

開発者はこの移行を範囲ごとに実行できます。開発者は従来の構文を使い続けることもできますが、できるだけ早く移行することをお勧めします。

最新の構文の使い方

最新の構文を使用するには、ion-label を削除し、label プロパティを使用して ion-range にラベルを渡します。ラベルの配置は labelPlacement プロパティを使用して設定することができます。

ラベルにカスタム HTML が必要な場合は、代わりに label スロットを使用して ion-range 内に直接渡すことができる。

<!-- Basic -->

<!-- Before -->
<ion-item>
<ion-label>Notifications</ion-label>
<ion-range></ion-range>
</ion-item>

<!-- After -->
<ion-item>
<ion-range label="Notifications"></ion-range>
</ion-item>

<!-- Fixed Labels -->

<!-- Before -->
<ion-item>
<ion-label position="fixed">Notifications</ion-label>
<ion-range></ion-range>
</ion-item>

<!-- After -->
<ion-item>
<ion-range label-placement="fixed" label="Notifications"></ion-range>
</ion-item>

<!-- Range at the start of line, Label at the end of line -->

<!-- Before -->
<ion-item>
<ion-label slot="end">Notifications</ion-label>
<ion-range></ion-range>
</ion-item>

<!-- After -->
<ion-item>
<ion-range label-placement="end" label="Notifications"></ion-range>
</ion-item>

<!-- Custom HTML label -->

<!-- Before -->
<ion-item>
<ion-label>
<div class="custom-label">Notifications</div>
</ion-label>
<ion-range></ion-range>
</ion-item>

<!-- After -->
<ion-item>
<ion-range>
<div slot="label" class="custom-label">Notifications</div>
</ion-range>
</ion-item>
注記

Ionic の過去のバージョンでは、ion-range が正しく機能するためには ion-item が必要でした。Ionic 7.0 以降では、ion-rangeion-item 内でアイテムを ion-list に配置する場合にのみ使用します。また、ion-range が正しく機能するためには、ion-item は不要になりました。

レガシー構文の使用

Ionicは、アプリが最新の範囲構文を使用しているかどうかをヒューリスティックで検出します。場合によっては、レガシー構文を使い続けた方が望ましいこともあります。開発者は ion-rangelegacy プロパティを true に設定することで、そのインスタンスにレガシー構文を使用させることができます。

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

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 | undefined
Defaultundefined

debounce

DescriptionHow long, in milliseconds, to wait to trigger the ionInput event after each change in the range value.
Attributedebounce
Typenumber | undefined
Defaultundefined

disabled

DescriptionIf true, the user cannot interact with the range.
Attributedisabled
Typeboolean
Defaultfalse

dualKnobs

DescriptionShow two knobs.
Attributedual-knobs
Typeboolean
Defaultfalse

label

DescriptionThe text to display as the control's label. Use this over the label slot if you only need plain text. The label property will take priority over the label slot if both are used.
Attributelabel
Typestring | undefined
Defaultundefined

labelPlacement

DescriptionWhere to place the label relative to the range. "start": The label will appear to the left of the range in LTR and to the right in RTL. "end": The label will appear to the right of the range in LTR and to the left in RTL. "fixed": The label has the same behavior as "start" except it also has a fixed width. Long text will be truncated with ellipses ("..."). "stacked": The label will appear above the range regardless of the direction.
Attributelabel-placement
Type"end" | "fixed" | "stacked" | "start"
Default'start'

legacy

DescriptionSet the legacy property to true to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the aria-label attribute or the label property. As a result, the legacy property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
Attributelegacy
Typeboolean | undefined
Defaultundefined

max

DescriptionMaximum integer value of the range.
Attributemax
Typenumber
Default100

min

DescriptionMinimum integer value of the range.
Attributemin
Typenumber
Default0

mode

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" | "md"
Defaultundefined

name

DescriptionThe name of the control, which is submitted with the form data.
Attributename
Typestring
Defaultthis.rangeId

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).

See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access this from within the callback.
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

DescriptionSpecifies the value granularity.
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

Descriptionthe value of the range.
Attributevalue
Typenumber | { lower: number; upper: number; }
Default0

イベント

NameDescriptionBubbles
ionBlurEmitted when the range loses focus.true
ionChangeThe ionChange event is fired for <ion-range> elements when the user modifies the element's value: - When the user releases the knob after dragging; - When the user moves the knob with keyboard arrows

ionChange is not fired when the value is changed programmatically.
true
ionFocusEmitted when the range has focus.true
ionInputThe ionInput event is fired for <ion-range> elements when the value is modified. Unlike ionChange, ionInput is fired continuously while the user is dragging the knob.true
ionKnobMoveEndEmitted when the user finishes moving the range knob, whether through mouse drag, touch gesture, or keyboard interaction.true
ionKnobMoveStartEmitted when the user starts moving the range knob, whether through mouse drag, touch gesture, or keyboard interaction.true

メソッド

No public methods available for this component.

CSS Shadow Parts

NameDescription
barThe inactive part of the bar.
bar-activeThe active part of the bar.
knobThe handle that is used to drag the range.
labelThe label text describing the range.
pinThe counter that appears above a knob.
tickAn inactive tick mark.
tick-activeAn active tick mark.

CSSカスタムプロパティ

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 (only available in MD mode)
--pin-colorColor of the range pin (only available in MD mode)

Slots

NameDescription
endContent is placed to the right of the range slider in LTR, and to the left in RTL.
labelThe label text to associate with the range. Use the "labelPlacement" property to control where the label is placed relative to the range.
startContent is placed to the left of the range slider in LTR, and to the right in RTL.