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>

CopyCopied

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

CopyCopied

import React, { useState } from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonList, IonItem, IonRange, IonLabel, IonIcon, IonItemDivider } from '@ionic/react';
import { sunny } from 'ionicons/icons';
import { RangeValue } from '@ionic/core';

export const RangeExamples: React.FC = () => {

  const [value, setValue] = useState(0);
  const [rangeValue, setRangeValue] = useState<{
    lower: number;
    upper: number;
  }>({ lower: 0, upper: 0 });

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>IonRange Examples</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonList>
          <IonItemDivider>Default</IonItemDivider>
          <IonItem>
            <IonRange pin={true} value={value} onIonChange={e => setValue(e.detail.value as number)} />
          </IonItem>
          <IonItem>
            <IonLabel>Value: {value}</IonLabel>
          </IonItem>

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

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

          <IonItemDivider>With Snaps & Ticks</IonItemDivider>
          <IonItem>
            <IonRange min={1000} max={2000} step={100} snaps={true} color="secondary" />
          </IonItem>

          <IonItemDivider>With Snaps & No Ticks</IonItemDivider>
          <IonItem>
            <IonRange min={1000} max={2000} step={100} snaps={true} ticks={false} color="secondary" />
          </IonItem>

          <IonItemDivider>Dual Knobs</IonItemDivider>
          <IonItem>
            <IonRange dualKnobs={true} min={0} max={60} step={3} snaps={true} onIonChange={e => setRangeValue(e.detail.value as any)} />
          </IonItem>
          <IonItem>
            <IonLabel>Value: lower: {rangeValue.lower} upper: {rangeValue.upper}</IonLabel>
          </IonItem>
        </IonList>
      </IonContent>
    </IonPage>
  );
};

CopyCopied

import { Component, h } from '@stencil/core';

@Component({
  tag: 'range-example',
  styleUrl: 'range-example.css'
})
export class RangeExample {
  render() {
    return [
      <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>
    ];
  }
}

CopyCopied

<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>
import { IonItem, IonLabel, IonList, IonRange } from '@ionic/vue';
import { defineComponent } from 'vue';

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

CopyCopied

プロパティ

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. This also impacts form bindings such as `ngModel` or `v-model`.
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 Shadow Parts

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.

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
`--pin-background`	Background of the range pin
`--pin-color`	Color of the range pin

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 Shadow Parts

CSSカスタムプロパティ

slot属性