ion-range
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コンポーネントで高度なスタイリングが必要な場合に推奨されるアプローチです。
レガシーな範囲構文からの移行
Ionic 7.0では、よりシンプルな範囲構文が導入されました。この新しい構文は、範囲を設定するために必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
開発者はこの移行を範囲ごとに実行できます。開発者は従来の構文を使い続けることもできますが、できるだけ早く移行することをお勧めします。
最新の構文の使い方
最新の構文を使用するには、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>