Sliderスライダー

指定した範囲の中から値を選択するためのコンポーネントです。

更新 2026/8/26

サイズ

MediumとLargeの2種類があります。

Medium: ValueValue
Large: ValueValue

import { Slider } from "@serendie/ui";
import { Dd, Dl, Dt } from "src/components/LayoutUtils";

export function SizeSample() {
  return (
    <Dl>
      <Dt>Medium</Dt>
      <Dd>
        <Slider
          startLabel="Value"
          endLabel="Value"
          defaultValue={[50]}
          min={0}
          max={100}
        />
      </Dd>
      <Dt>Large</Dt>
      <Dd>
        <Slider
          size="large"
          startLabel="Value"
          endLabel="Value"
          defaultValue={[50]}
          min={0}
          max={100}
        />
      </Dd>
    </Dl>
  );
}

マーカー

markerValues propsで任意の値の位置にマーカーを表示できます。showMarkers propsをfalseにするとマーカーを非表示にできます。

With Markers: ValueValue
Without Markers: ValueValue

import { Slider } from "@serendie/ui";
import { Dd, Dl, Dt } from "src/components/LayoutUtils";

export function MarkerSample() {
  return (
    <Dl>
      <Dt>With Markers</Dt>
      <Dd>
        <Slider
          size="large"
          startLabel="Value"
          endLabel="Value"
          defaultValue={[50]}
          min={0}
          max={100}
          markerValues={[0, 25, 50, 75, 100]}
        />
      </Dd>
      <Dt>Without Markers</Dt>
      <Dd>
        <Slider
          size="medium"
          startLabel="Value"
          endLabel="Value"
          defaultValue={[50]}
          min={0}
          max={100}
          showMarkers={false}
        />
      </Dd>
    </Dl>
  );
}

状態

非活性とする際はdisabled propsを使用してください。

Enabled: ValueValue
Disabled: ValueValue

import { Slider } from "@serendie/ui";
import { Dd, Dl, Dt } from "src/components/LayoutUtils";

export function StateSample() {
  return (
    <Dl>
      <Dt>Enabled</Dt>
      <Dd>
        <Slider
          startLabel="Value"
          endLabel="Value"
          defaultValue={[50]}
          min={0}
          max={100}
        />
      </Dd>
      <Dt>Disabled</Dt>
      <Dd>
        <Slider
          startLabel="Value"
          endLabel="Value"
          defaultValue={[50]}
          min={0}
          max={100}
          disabled
        />
      </Dd>
    </Dl>
  );
}