Skip to main content
Version: v6

ion-range

shadow

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

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

Rangeラベル

ラベルやカスタム UI 要素は、要素に slot="start" または slot="end" を追加することで、範囲のどちら側にもスロットさせることができます。この要素には、 ion-label や ion-icon 、 div など、任意の要素を指定することができます。ドキュメントの方向性が左から右に設定されている場合、 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は最も近い利用可能な値にスナップします。

Event Handling

Using ionChange

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

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

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 & Record<never, never> ｜ undefined
Defaultundefined

debounce

DescriptionHow long, in milliseconds, to wait to trigger the ionChange event after each change in the range value. This also impacts form bindings such as ngModel or v-model.
Attributedebounce
Typenumber
Default0

disabled

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

dualKnobs

DescriptionShow two knobs.
Attributedual-knobs
Typeboolean
Defaultfalse

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
Default''

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

イベント

NameDescription
ionBlurEmitted when the range loses focus.
ionChangeEmitted when the value property has changed.
ionFocusEmitted when the range has focus.
ionKnobMoveEndEmitted when the user finishes moving the range knob, whether through mouse drag, touch gesture, or keyboard interaction.
ionKnobMoveStartEmitted when the user starts moving the range knob, whether through mouse drag, touch gesture, or keyboard interaction.

メソッド

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.
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.
startContent is placed to the left of the range slider in LTR, and to the right in RTL.

Contents

Edit this page