Skip to main content
Version: v8

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コンポーネントで高度なスタイリングが必要な場合に推奨されるアプローチです。

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​

Descriptiontrueの場合、ユーザは範囲と対話することができません。
Attributedisabled
Typeboolean
Defaultfalse

dualKnobs​

Description2つのノブを表示します。
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'

max​

Description範囲の最大整数値。
Attributemax
Typenumber
Default100

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.
Attributemin
Typenumber
Default0

mode​

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。

This is a virtual property that is set once during initialization and will not update if you change its value after the initial render.
Attributemode
Type"ios" ｜ "md"
Defaultundefined

name​

Descriptionフォームデータとともに送信されるコントロールの名前。
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.
Attributepin-formatter
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​

Description値の粒度を指定します。
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​

Description範囲の値です。
Attributevalue
Typenumber ｜ { lower: number; upper: number; }
Default0

イベント​

NameDescriptionBubbles
ionBlurレンジの焦点が合わなくなったときに発行されます。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

This event will not emit when programmatically setting the value property.		true
ionFocusレンジのフォーカスが合ったときに発行されます。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
barバーの非アクティブな部分。
bar-activeバーのアクティブな部分です。
knob範囲をドラッグする際に使用するハンドル。
label範囲を表すラベルテキスト。
pinノブの上に表示されるカウンターです。
tick非アクティブなティックマークです。
tick-activeアクティブなティックマークです。

CSSカスタムプロパティ​

NameDescription
--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​

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

Contents

Edit this page