Slider

つまみで数値を選ぶ。範囲指定にも対応。

数値をつまみで選ぶ入力です。value に配列を渡すとつまみが増え、範囲指定になります。

export const client = "only";

import { useState } from "react";
import { Slider, Label } from "@squadbase/vantage/ui";

export default function Example() {
  const [threshold, setThreshold] = useState(40);
  const [range, setRange] = useState([20, 80]);
  return (
    <div className="flex w-80 flex-col gap-8">
      <div className="grid gap-3">
        <Label>しきい値: {threshold}</Label>
        <Slider
          value={threshold}
          onValueChange={(value) => setThreshold(value as number)}
        />
      </div>
      <div className="grid gap-3">
        <Label>
          範囲: {range[0]} 〜 {range[1]}
        </Label>
        <Slider
          value={range}
          onValueChange={(value) => setRange(value as number[])}
        />
      </div>
    </div>
  );
}

import { Slider } from "@squadbase/vantage/ui";

PropType

value?number | number[]

つまみの位置。配列なら範囲指定になる。

Typenumber | number[]

defaultValue?number | number[]

非制御時の初期値。

Typenumber | number[]

onValueChange?(value: number | number[]) => void

変更時。`value` に渡した形と同じ形が返る。

Type(value: number | number[]) => void

min?number

下限。

Typenumber

Default0

max?number

上限。

Typenumber

Default100

step?number

刻み。

Typenumber

Default1

disabled?boolean

操作を無効にする。

Typeboolean

つまみは端で内側に収まるよう配置されるので、min / max のところでトラックからはみ出しません。