shadow Rangeスライダは、スライダノブを動かして、ユーザーが値の範囲を選択できるようにするものです。デフォルトでは、1つのノブがレンジの値を制御します。この動作は dual knobs を使ってカスタマイズすることができます。
デフォルトでは、Rangeスライダーの最小値は0
、最大値は100
です。これは min
と max
プロパティで設定することができます。
ラベルやカスタム UI 要素は、要素に slot="start"
または slot="end"
を追加することで、範囲のどちら側にもスロットさせることができます。この要素には、 ion-label
や ion-icon
、 div
など、任意の要素を指定することができます。ドキュメントの方向性が左から右に設定されている場合、 start
位置にスロットされたコンテンツは範囲の左側に表示され、 end
位置にスロットされたコンテンツは範囲の右側に表示されます。右から左へ(rtl)の方向性の場合、start
の位置にスロットされたコンテンツは範囲の右側に表示され、end
の位置にスロットされたコンテンツは範囲の左側に表示されます。
Dual knobs はユーザーが下限と上限の値を選択するために使用できる2つのknobsコントロールを導入しています。選択されると、Range は選択された上下限の値を含む RangeValue を持つ ionChange
イベントを発信します。
pin
属性は、ドラッグしたときにノブの上にレンジの値を表示します。これにより、ユーザはRange内の特定の値を選択することができます。
pinFormatter
関数を使用すると、開発者はユーザーに対してレンジの値のフォーマットをカスタマイズすることができます。
TicksはRange 上で利用可能な各値のインジケータを表示します。Ticksを使用するためには、開発者は snaps
と ticks
プロパティの両方を true
に設定する必要があります。
snapsを有効にし、knobをドラッグして放すと、Range knobは最も近い利用可能な値にスナップします。
ionChange
イベントはRange knobの値の変更を監視します。
マウスドラッグ、タッチジェスチャー、キーボード操作のいずれであっても、Range knobのドラッグが開始されると ionKnobMoveStart
イベントが発行されます。逆に、ionKnobMoveEnd
はRange knobがリリースされたときに発生します。両イベントは RangeValue
タイプで発生し、dualKnobs
プロパティと組み合わせて動作します。
Rangeには、アプリケーションのデザインに合わせてRangeコンポーネントの外観を素早くテーマ化してカスタマイズするためのCSS Variables が含まれています。
Rangeには CSS Shadow Parts があり、Rangeコンポーネント内の特定の要素ノードを完全にカスタマイズすることができます。CSS Shadow Partsは最も多くのカスタマイズ機能を提供し、Rangeコンポーネントで高度なスタイリングが必要な場合に推奨されるアプローチです。
interface RangeChangeEventDetail { value : RangeValue ; }
Copy interface RangeKnobMoveStartEventDetail { value : RangeValue ; }
Copy interface RangeKnobMoveEndEventDetail { value : RangeValue ; }
Copy 必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、CustomEvent
インターフェースの代わりにこのインターフェースを使用することが可能です。
interface RangeCustomEvent extends CustomEvent { detail : RangeChangeEventDetail ; target : HTMLIonRangeElement ; }
Copy type RangeValue = number | { lower : number , upper : number } ;
Copy Description The 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. Attribute active-bar-start
Type number | undefined
Default undefined
Description The 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 . Attribute color
Type "danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined
Default undefined
Description How 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
. Attribute debounce
Type number
Default 0
Description If true
, the user cannot interact with the range. Attribute disabled
Type boolean
Default false
Description Show two knobs. Attribute dual-knobs
Type boolean
Default false
Description Maximum integer value of the range. Attribute max
Type number
Default 100
Description Minimum integer value of the range. Attribute min
Type number
Default 0
Description The mode determines which platform styles to use. Attribute mode
Type "ios" | "md"
Default undefined
Description The name of the control, which is submitted with the form data. Attribute name
Type string
Default ''
Description If true
, a pin with integer value is shown when the knob is pressed. Attribute pin
Type boolean
Default false
Description A callback used to format the pin text. By default the pin text is set to Math.round(value)
. Attribute undefined
Type (value: number) => string | number
Default (value: number): number => Math.round(value)
Description If true
, the knob snaps to tick marks evenly spaced based on the step property value. Attribute snaps
Type boolean
Default false
Description Specifies the value granularity. Attribute step
Type number
Default 1
Description If true
, tick marks are displayed based on the step value. Only applies when snaps
is true
. Attribute ticks
Type boolean
Default true
Description the value of the range. Attribute value
Type number | { lower: number; upper: number; }
Default 0
Name Description ionBlur
Emitted when the range loses focus. ionChange
Emitted when the value property has changed. ionFocus
Emitted when the range has focus. ionKnobMoveEnd
Emitted when the user finishes moving the range knob, whether through mouse drag, touch gesture, or keyboard interaction. ionKnobMoveStart
Emitted when the user starts moving the range knob, whether through mouse drag, touch gesture, or keyboard interaction.
No public methods available for this component.
Name Description bar
The inactive part of the bar. bar-active
The active part of the bar. knob
The handle that is used to drag the range. pin
The counter that appears above a knob. tick
An inactive tick mark. tick-active
An active tick mark.
Name Description --bar-background
Background of the range bar --bar-background-active
Background of the active range bar --bar-border-radius
Border radius of the range bar --bar-height
Height of the range bar --height
Height of the range --knob-background
Background of the range knob --knob-border-radius
Border radius of the range knob --knob-box-shadow
Box shadow of the range knob --knob-size
Size of the range knob --pin-background
Background of the range pin (only available in MD mode) --pin-color
Color of the range pin (only available in MD mode)
Name Description end
Content is placed to the right of the range slider in LTR, and to the left in RTL. start
Content is placed to the left of the range slider in LTR, and to the right in RTL.