バージョン: v8

ion-range

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

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

ラベル

ラベルは範囲を説明するために使用する必要があります。これらは視覚的に使用でき、ユーザーが範囲に焦点を合わせているときにはスクリーンリーダーによっても読み上げられます。これにより、ユーザーは範囲の意図を理解しやすくなります。レンジには、ラベルを割り当てるためのいくつかの方法があります。

labelプロパティ: プレーンテキストラベルに使用
labelスロット: カスタムHTMLラベルに使用
aria-label: スクリーンリーダーにラベルを提供するために使用しますが、可視ラベルは追加しません

ラベルの配置

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

ラベルスロット

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

可視ラベルなし

可視ラベルが必要ない場合でも、開発者はaria-labelを提供して、スクリーンリーダーで範囲にアクセスできるようにする必要があります。

装飾

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

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

デュアルノブ

デュアルノブは、ユーザーが下限と上限で値を選択するために使用できる2つのノブコントロールを導入します。選択すると、レンジは選択された上限値と下限値を含むRangeValueでionChangeイベントを発行します。

ピン

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

pinFormatter関数を使用すると、開発者はレンジ値の形式をユーザーに合わせてカスタマイズできます。

スナップと目盛り

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

スナップを有効にすると、レンジノブはドラッグしてリリースされると、最も近い使用可能な値にスナップします。

イベント処理

`ionChange`の使用

ionChangeイベントは、レンジノブの値が変更されると発行されます。

コンソール

上記の例からログに記録された場合、コンソールメッセージがここに表示されます。

`ionKnobMoveStart`と`ionKnobMoveEnd`の使用

ionKnobMoveStartイベントは、マウスドラッグ、タッチジェスチャ、またはキーボード操作のいずれかによって、レンジノブのドラッグが開始されたときに発行されます。逆に、ionKnobMoveEndは、レンジノブがリリースされたときに発行されます。どちらのイベントもRangeValue型で発行され、dualKnobsプロパティと組み合わせて機能します。

コンソール

上記の例からログに記録された場合、コンソールメッセージがここに表示されます。

テーマ設定

CSSカスタムプロパティ

レンジには、アプリケーションのデザインに合わせてレンジコンポーネントの外観をすばやくテーマ設定およびカスタマイズするためのCSS変数が含まれています。

CSSシャドウパーツ

レンジには、レンジコンポーネント内の特定の要素ノードを完全にカスタマイズできるようにするCSSシャドウパーツが含まれています。CSSシャドウパーツは、最大限のカスタマイズ機能を提供し、レンジコンポーネントで高度なスタイル設定が必要な場合に推奨されるアプローチです。

レガシーレンジ構文からの移行

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

開発者は、この移行を一度に1つのレンジずつ実行できます。開発者は引き続きレガシー構文を使用できますが、できるだけ早く移行することをお勧めします。

最新の構文の使用

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

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

JavaScript
Angular
React
Vue

<!-- 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>

<!-- 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 labelPlacement="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 labelPlacement="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>

{/* Basic */}

{/* Before */}
<IonItem>
  <IonLabel>Notifications</IonLabel>
  <IonRange></IonRange>
</IonItem>

{/* After */}
<IonItem>
  <IonRange label="Notifications"></IonRange>
</IonItem>

{/* Fixed Labels */}

{/* Before */}
<IonItem>
  <IonLabel position="fixed">Notifications</IonLabel>
  <IonRange></IonRange>
</IonItem>

{/* After */}
<IonItem>
  <IonRange labelPlacement="fixed" label="Notifications"></IonRange>
</IonItem>

{/* Range at the start of line, Label at the end of line */}

{/* Before */}
<IonItem>
  <IonLabel slot="end">Notifications</IonLabel>
  <IonRange></IonRange>
</IonItem>

{/* After */}
<IonItem>
  <IonRange labelPlacement="end" label="Notifications"></IonRange>
</IonItem>

{/* Custom HTML label */}

{/* Before */}
<IonItem>
  <IonLabel>
    <div className="custom-label">Notifications</div>
  </IonLabel>
  <IonRange></IonRange>
</IonItem>

<!-- After -->
<IonItem>
  <IonRange>
    <div slot="label" className="custom-label">Notifications</div>
  </IonRange>
</IonItem>

<!-- 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-listに配置されている場合にのみ、ion-itemでion-rangeを使用する必要があります。さらに、ion-rangeが適切に機能するためにion-itemは必要なくなりました。

レガシー構文の使用

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

インターフェース

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;
}

型

RangeValue

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

プロパティ

activeBarStart

説明	レンジのアクティブバーの開始位置。この機能は、シングルノブ（dualKnobs="false"）でのみ利用可能です。有効な値は、最小値以上、最大値以下です。
属性	`active-bar-start`
型	`number ｜ undefined`
デフォルト	`undefined`

color

説明	アプリケーションのカラーパレットで使用する色。デフォルトのオプションは、`"primary"`、`"secondary"`、`"tertiary"`、`"success"`、`"warning"`、`"danger"`、`"light"`、`"medium"`、および`"dark"`です。色の詳細については、テーマを参照してください。
属性	`color`
型	`"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined`
デフォルト	`undefined`

debounce

説明	レンジの値が変更されるたびに、`ionInput`イベントをトリガーするまでの待機時間（ミリ秒単位）。
属性	`debounce`
型	`number ｜ undefined`
デフォルト	`undefined`

disabled

説明	`true`の場合、ユーザーはレンジを操作できません。
属性	`disabled`
型	`boolean`
デフォルト	`false`

dualKnobs

説明	2つのノブを表示します。
属性	`dual-knobs`
型	`boolean`
デフォルト	`false`

label

説明	コントロールのラベルとして表示するテキスト。プレーンテキストのみが必要な場合は、`label`スロットの代わりにこれを使用します。`label`プロパティと`label`スロットの両方が使用されている場合、`label`プロパティが`label`スロットよりも優先されます。
属性	`label`
型	`string ｜ undefined`
デフォルト	`undefined`

labelPlacement

説明	レンジに対するラベルの配置場所。`"start"`：ラベルはLTRではレンジの左側に、RTLでは右側に表示されます。`"end"`：ラベルはLTRではレンジの右側に、RTLでは左側に表示されます。`"fixed"`：ラベルは`"start"`と同じ動作をしますが、固定幅も持ちます。長いテキストは省略記号（"..."）で切り捨てられます。`"stacked"`：ラベルは方向に関係なく、レンジの上に表示されます。
属性	`label-placement`
型	`"end" ｜ "fixed" ｜ "stacked" ｜ "start"`
デフォルト	`'start'`

max

説明	レンジの最大整数値。
属性	`max`
型	`number`
デフォルト	`100`

min

説明	レンジの最小整数値。
属性	`min`
型	`number`
デフォルト	`0`

mode

説明	モードは、使用するプラットフォームスタイルを決定します。
属性	`mode`
型	`"ios" ｜ "md"`
デフォルト	`undefined`

name

説明	フォームデータと一緒に送信されるコントロールの名前。
属性	`name`
型	`string`
デフォルト	`this.rangeId`

説明	`true`の場合、ノブが押されたときに整数値のピンが表示されます。
属性	`pin`
型	`boolean`
デフォルト	`false`

pinFormatter

説明	ピンテキストのフォーマットに使用されるコールバック。デフォルトでは、ピンテキストは`Math.round(value)`に設定されます。コールバック内から`this`にアクセスする必要がある場合は、https://ionic.dokyumento.jp/docs/troubleshooting/runtime#accessing-thisを参照してください。
属性	`undefined`
型	`(value: number) => string ｜ number`
デフォルト	`(value: number): number => Math.round(value)`

snaps

説明	`true`の場合、ノブはstepプロパティ値に基づいて均等に配置された目盛りにスナップします。
属性	`snaps`
型	`boolean`
デフォルト	`false`

step

説明	値の粒度を指定します。
属性	`step`
型	`number`
デフォルト	`1`

ticks

説明	`true`の場合、stepの値に基づいて目盛りが表示されます。`snaps`が`true`の場合にのみ適用されます。
属性	`ticks`
型	`boolean`
デフォルト	`true`

value

説明	レンジの値。
属性	`value`
型	`number ｜ { lower: number; upper: number; }`
デフォルト	`0`

イベント

名前	説明	バブル
`ionBlur`	レンジがフォーカスを失ったときに発行されます。	`true`
`ionChange`	`ionChange`イベントは、ユーザーが要素の値を変更したときに`<ion-range>`要素に対して発生します：- ユーザーがドラッグ後にノブを離したとき。- ユーザーがキーボードの矢印でノブを移動したときこのイベントは、プログラムで`value`プロパティを設定する場合には発生しません。	`true`
`ionFocus`	レンジがフォーカスされたときに発行されます。	`true`
`ionInput`	`ionInput`イベントは、値が変更されたときに`<ion-range>`要素に対して発生します。`ionChange`とは異なり、`ionInput`はユーザーがノブをドラッグしている間、継続的に発生します。	`true`
`ionKnobMoveEnd`	マウスドラッグ、タッチジェスチャ、キーボード操作のいずれであっても、ユーザーがレンジノブの移動を終了したときに発行されます。	`true`
`ionKnobMoveStart`	マウスドラッグ、タッチジェスチャ、キーボード操作のいずれであっても、ユーザーがレンジノブの移動を開始したときに発行されます。	`true`

メソッド

このコンポーネントで使用できるパブリックメソッドはありません。

CSSシャドウパーツ

名前	説明
`bar`	バーの非アクティブな部分。
`bar-active`	バーのアクティブな部分。
`knob`	レンジをドラッグするために使用されるハンドル。
`label`	レンジを説明するラベルテキスト。
`pin`	ノブの上に表示されるカウンター。
`tick`	非アクティブな目盛り。
`tick-active`	アクティブな目盛り。

CSSカスタムプロパティ

名前	説明
`--bar-background`	レンジバーの背景
`--bar-background-active`	アクティブなレンジバーの背景
`--bar-border-radius`	レンジバーのボーダー半径
`--bar-height`	レンジバーの高さ
`--height`	レンジの高さ
`--knob-background`	レンジノブの背景
`--knob-border-radius`	レンジノブのボーダー半径
`--knob-box-shadow`	レンジノブのボックスシャドウ
`--knob-size`	レンジノブのサイズ
`--pin-background`	レンジピンの背景（MDモードでのみ利用可能）
`--pin-color`	レンジピンの色（MDモードでのみ利用可能）

名前	説明
`--bar-background`	レンジバーの背景
`--bar-background-active`	アクティブなレンジバーの背景
`--bar-border-radius`	レンジバーのボーダー半径
`--bar-height`	レンジバーの高さ
`--height`	レンジの高さ
`--knob-background`	レンジノブの背景
`--knob-border-radius`	レンジノブのボーダー半径
`--knob-box-shadow`	レンジノブのボックスシャドウ
`--knob-size`	レンジノブのサイズ
`--pin-background`	レンジピンの背景（MDモードでのみ利用可能）
`--pin-color`	レンジピンの色（MDモードでのみ利用可能）

スロット

名前	説明
`end`	コンテンツは、LTRではレンジスライダーの右側、RTLでは左側に配置されます。
`label`	レンジに関連付けるラベルテキスト。「labelPlacement」プロパティを使用して、ラベルをレンジに対して配置する場所を制御します。
`start`	コンテンツは、LTRではレンジスライダーの左側、RTLでは右側に配置されます。

ラベル​

ラベルの配置​

ラベルスロット​

可視ラベルなし​

装飾​

デュアルノブ​

ピン​

スナップと目盛り​

イベント処理​

ionChangeの使用​

ionKnobMoveStartとionKnobMoveEndの使用​

テーマ設定​

CSSカスタムプロパティ​

CSSシャドウパーツ​

レガシーレンジ構文からの移行​

最新の構文の使用​

レガシー構文の使用​

インターフェース​

RangeChangeEventDetail​

RangeKnobMoveStartEventDetail​

RangeKnobMoveEndEventDetail​

RangeCustomEvent​

型​

RangeValue​

プロパティ​

activeBarStart​

color​

debounce​

disabled​

dualKnobs​

label​

labelPlacement​

max​

min​

mode​

name​

pin​

pinFormatter​

snaps​

step​

ticks​

value​

イベント​

メソッド​

CSSシャドウパーツ​

CSSカスタムプロパティ​

スロット​

コンテンツ

ラベル

ラベルの配置

ラベルスロット

可視ラベルなし

装飾

デュアルノブ

ピン

スナップと目盛り

イベント処理

`ionChange`の使用

`ionKnobMoveStart`と`ionKnobMoveEnd`の使用

テーマ設定

CSSカスタムプロパティ

CSSシャドウパーツ

レガシーレンジ構文からの移行

最新の構文の使用

レガシー構文の使用

インターフェース

RangeChangeEventDetail

RangeKnobMoveStartEventDetail

RangeKnobMoveEndEventDetail

RangeCustomEvent

型

RangeValue

プロパティ

activeBarStart

color

debounce

disabled

dualKnobs

label

labelPlacement

max

min

mode

name

pin

pinFormatter

snaps

step

ticks

value

イベント

メソッド

CSSシャドウパーツ

CSSカスタムプロパティ

スロット