Version: v7

ion-range

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

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

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 はユーザーが下限と上限の値を選択するために使用できる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 プロパティと組み合わせて動作します。

テーマ

CSSカスタムプロパティ

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

CSS Shadow Parts

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

Migrating from Legacy Range Syntax

A simpler range syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an range, resolves accessibility issues, and improves the developer experience.

Developers can perform this migration one range at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible.

最新の構文の使い方

Using the modern syntax involves removing the ion-label and passing the label to ion-range using the label property. The placement of the label can be configured using the labelPlacement property.

If custom HTML is needed for the label, it can be passed directly inside the ion-range using the label slot instead.

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>

note

In past versions of Ionic, ion-item was required for ion-range to function properly. Starting in Ionic 7.0, ion-range should only be used in an ion-item when the item is placed in an ion-list. Additionally, ion-item is no longer required for ion-range to function properly.

Using the Legacy Syntax

Ionic uses heuristics to detect if an app is using the modern range syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the legacy property on ion-range to true to force that instance of the range to use the legacy syntax.

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	レンジアクティブバーの開始位置です。この機能は、ノブが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	レンジの値が変化するたびに `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`

labelPlacement

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

legacy

Description	`legacy`プロパティを`true`に設定すると、レガシーフォームコントロールのマークアップを強制的に使用することができます。Ionicは、コンポーネントが`aria-label`属性または`label`プロパティを使用している場合にのみ、最新のフォームマークアップを選択します。そのため、`legacy`プロパティは、この自動オプトイン動作を回避したい場合にのみ、エスケープハッチとして使用する必要があります。なお、このプロパティはIonicの今後のメジャーリリースで削除され、すべてのフォームコンポーネントはモダンフォームマークアップを使用するようオプトインされる予定です。
Attribute	`legacy`
Type	`boolean ｜ undefined`
Default	`undefined`

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	`this.rangeId`

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`

イベント

Name	Description
`ionBlur`	レンジの焦点が合わなくなったときに発行されます。
`ionChange`	`ionChange`イベントは、`<ion-range>`要素に対して、ユーザーがその要素の値を変更したときに発生します： - ドラッグした後にノブを離したとき - キーボードの矢印でノブを動かしたときプログラムで値を変更したときは、`ionChange`イベントは発生しません。
`ionFocus`	レンジのフォーカスが合ったときに発行されます。
`ionInput`	`ionInput`イベントは、`<ion-range>`要素に対して、値が変更されたときに発生するイベントです。`ionChange`とは異なり、`ionInput`はユーザがノブをドラッグしている間、継続して発生します。
`ionKnobMoveEnd`	マウスドラッグ、タッチジェスチャー、キーボード操作など、ユーザーが範囲ノブの移動を終了したときに発行されます。
`ionKnobMoveStart`	マウスドラッグ、タッチジェスチャー、キーボード操作など、ユーザーがレンジノブの移動を開始したときに発行されます。

メソッド

No public methods available for this component.

CSS Shadow Parts

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

CSSカスタムプロパティ

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

Labels​

Label Placement​

Label Slot​

No Visible Label​

Decorations​

Dual Knobs​

ピン​

Snapping & Ticks​

イベントハンドリング​

Using ionChange​

ionKnobMoveStart と ionKnobMoveEnd を使う​

テーマ​

CSSカスタムプロパティ​

CSS Shadow Parts​

Migrating from Legacy Range Syntax​

最新の構文の使い方​

note

Using the Legacy Syntax​

Interfaces​

RangeChangeEventDetail​

RangeKnobMoveStartEventDetail​

RangeKnobMoveEndEventDetail​

RangeCustomEvent​

Types​

RangeValue​

プロパティ​

activeBarStart​

color​

debounce​

disabled​

dualKnobs​

labelPlacement​

legacy​

max​

min​

mode​

name​

pin​

pinFormatter​

snaps​

step​

ticks​

value​

イベント​

メソッド​

CSS Shadow Parts​

CSSカスタムプロパティ​

Slots​

Contents

Labels

Label Placement

Label Slot

No Visible Label

Decorations

Dual Knobs

ピン

Snapping & Ticks

イベントハンドリング

Using `ionChange`

`ionKnobMoveStart` と `ionKnobMoveEnd` を使う

テーマ

CSSカスタムプロパティ

CSS Shadow Parts

Migrating from Legacy Range Syntax

最新の構文の使い方

Using the Legacy Syntax

Interfaces

RangeChangeEventDetail

RangeKnobMoveStartEventDetail

RangeKnobMoveEndEventDetail

RangeCustomEvent

Types

RangeValue

プロパティ

activeBarStart

color

debounce

disabled

dualKnobs

labelPlacement

legacy

max

min

mode

name

pin

pinFormatter

snaps

step

ticks

value

イベント

メソッド

CSS Shadow Parts

CSSカスタムプロパティ

Slots