メインコンテンツまでスキップ
Version: v6

ion-range

shadow

Contents

Range sliderを使用すると、sliderのつまみを動かして値の範囲を選択できます。 2つのつまみを使用できますが、デフォルトでは、 1つのつまみで範囲の値を制御します。

Range Labels

要素に slot="start" または slot="end" を追加すると、 Labelを範囲の両側に配置できます。 要素は ion-label である必要はなく、 任意の要素に追加して、rangeの左または右に配置できます。

Custom Pin Formatters

When using a pin, the default behavior is to round the value that gets displayed using Math.round(). This behavior can be customized by passing in a formatter function to the pinFormatter property. See the Usage section for an example.

Interfaces

RangeChangeEventDetail

interface RangeChangeEventDetail {
value: RangeValue;
}

RangeCustomEvent

While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.

interface RangeCustomEvent extends CustomEvent {
detail: RangeChangeEventDetail;
target: HTMLIonRangeElement;
}

Types

RangeValue

type RangeValue = number | { lower: number, upper: number };

Usage

<ion-list>
<ion-item>
<ion-range color="danger" [pin]="true"></ion-range>
</ion-item>

<ion-item>
<ion-range min="-200" max="200" color="secondary">
<ion-label slot="start">-200</ion-label>
<ion-label slot="end">200</ion-label>
</ion-range>
</ion-item>

<ion-item>
<ion-range min="20" max="80" step="2">
<ion-icon size="small" slot="start" name="sunny"></ion-icon>
<ion-icon slot="end" name="sunny"></ion-icon>
</ion-range>
</ion-item>

<ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
</ion-item>

<ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" ticks="false" color="secondary"></ion-range>
</ion-item>

<ion-item>
<ion-range dualKnobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
</ion-item>

<ion-item>
<ion-range min="0" max="100" [pinFormatter]="customFormatter" [pin]="true"></ion-range>
</ion-item>
</ion-list>
import { Component } from '@angular/core';

@Component({})
export class MyComponent {
constructor() {}

public customFormatter(value: number) {
return `${value}%`
}
}

Properties

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
Typestring | 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

Events

NameDescription
ionBlurEmitted when the range loses focus.
ionChangeEmitted when the value property has changed.
ionFocusEmitted when the range has focus.

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 Custom Properties

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
--pin-colorColor of the range pin

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.
View Source