ion-range

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

Range Labels

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

利用方法

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

<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 dual-knobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
  </ion-item>
</ion-list>

import React from 'react';
import { IonList, IonItem, IonRange, IonLabel, IonIcon, IonContent } from '@ionic/react';

export const RangeExample: React.FunctionComponent = () => (
  <IonContent>
    <IonList>
      <IonItem>
        <IonRange color="danger" pin={true} />
      </IonItem>

      <IonItem>
        <IonRange min={-200} max={200} color="secondary">
          <IonLabel slot="start">-200</IonLabel>
          <IonLabel slot="end">200</IonLabel>
        </IonRange>
      </IonItem>

      <IonItem>
        <IonRange min={20} max={80} step={2}>
          <IonIcon size="small" slot="start" name="sunny" />
          <IonIcon slot="end" name="sunny" />
        </IonRange>
      </IonItem>

      <IonItem>
        <IonRange min={1000} max={2000} step={100} snaps={true} color="secondary" />
      </IonItem>

      <IonItem>
        <IonRange min={1000} max={2000} step={100} snaps={true} ticks={false} color="secondary" />
      </IonItem>

      <IonItem>
        <IonRange dualKnobs={true} min={21} max={72} step={3} snaps={true} />
      </IonItem>
    </IonList>
  </IonContent>
);

<template>
  <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 ref="rangeDualKnobs" dual-knobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
    </ion-item>
  </ion-list>
</template>

<script>
export default {
  mounted() {
    // Sets initial value for dual-knob ion-range
    this.$refs.rangeDualKnobs.value = { lower: 24, upper: 42 };
  }
}
</script>

プロパティ

color
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	`string \| undefined`
debounce
Description	How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value.
Attribute	`debounce`
Type	`number`
Default	`0`
disabled
Description	If `true`, the user cannot interact with the range.
Attribute	`disabled`
Type	`boolean`
Default	`false`
dualKnobs
Description	Show two knobs.
Attribute	`dual-knobs`
Type	`boolean`
Default	`false`
max
Description	Maximum integer value of the range.
Attribute	`max`
Type	`number`
Default	`100`
min
Description	Minimum integer value of the range.
Attribute	`min`
Type	`number`
Default	`0`
mode
Description	The mode determines which platform styles to use.
Attribute	`mode`
Type	`"ios" \| "md"`
name
Description	The name of the control, which is submitted with the form data.
Attribute	`name`
Type	`string`
Default	`''`
pin
Description	If `true`, a pin with integer value is shown when the knob is pressed.
Attribute	`pin`
Type	`boolean`
Default	`false`
snaps
Description	If `true`, the knob snaps to tick marks evenly spaced based on the step property value.
Attribute	`snaps`
Type	`boolean`
Default	`false`
step
Description	Specifies the value granularity.
Attribute	`step`
Type	`number`
Default	`1`
ticks
Description	If `true`, tick marks are displayed based on the step value. Only applies when `snaps` is `true`.
Attribute	`ticks`
Type	`boolean`
Default	`true`
value
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.

CSSカスタムプロパティ

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

slot属性

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.

ion-range

Range Labels

利用方法

プロパティ

color

debounce

disabled

dualKnobs

max

min

mode

name

pin

snaps

step

ticks

value

イベント

CSSカスタムプロパティ

slot属性