Slider

数値を範囲内で選択するスライダーコンポーネント。

インストール

import { Slider } from "@ginga-ui/core";

基本的な使い方

シンプルなスライダーの使用例です。

音量
50
export function BasicExample() {
  return (
    <Slider defaultValue={50}>
      <div>音量</div>
      <SliderOutput />
      <SliderTrack>
        <SliderThumb />
      </SliderTrack>
    </Slider>
  );
}

カスタム範囲

カスタムの最小値・最大値を持つスライダーです。

バランス
0
export function CustomRangeExample() {
  return (
    <Slider defaultValue={0} minValue={-50} maxValue={50}>
      <div>バランス</div>
      <SliderOutput />
      <SliderTrack>
        <SliderThumb />
      </SliderTrack>
    </Slider>
  );
}

ステップ付き

ステップを指定したスライダーです。

音量レベル(10刻み)
50
export function WithStepsExample() {
  return (
    <Slider defaultValue={50} step={10}>
      <div>音量レベル(10刻み)</div>
      <SliderOutput />
      <SliderTrack>
        <SliderThumb />
      </SliderTrack>
    </Slider>
  );
}

無効化

無効化されたスライダーです。

無効化されたスライダー
50
export function DisabledExample() {
  return (
    <Slider defaultValue={50} isDisabled>
      <div>無効化されたスライダー</div>
      <SliderOutput />
      <SliderTrack>
        <SliderThumb />
      </SliderTrack>
    </Slider>
  );
}