Slider

数値範囲から 1 つの値を選択するコンポーネント。音量・幅・しきい値など、連続値や粗いステップで指定したいパラメータに使用する。

プレビュー

50%

import { useState } from "react";
import { Slider } from "@/components/ui/slider";

const [value, setValue] = useState([50]);

<Slider
  value={value}
  onValueChange={setValue}
  min={0}
  max={100}
  step={1}
/>

step による粗さ調整

step プロップで刻み幅を調整する。小さい値で連続的に、大きい値で粗く飛び飛びに選択できる。

step=1

42%

step=10

40%

step=25

50%

利用例

Audio Player の音量・再生位置バー
Input のショーケースで横幅を切り替える操作 UI
しきい値設定(通知の感度、フィルタの強さなど)

仕様

primitive: src/components/ui/slider.tsx(Radix Slider + Thinca カラー)
track: 高さ 8px / radius full / 背景 --neutral-grey-20
range(選択範囲): --secondary-blue
thumb: 16px 円形 / border --secondary-blue 1px / hover で ring 16% (--alpha-blue-16) / focus で ring 30% (--alpha-blue-30)
props: min / max / step / value / onValueChange

現状は shadcn 標準のレイアウトに Thinca カラーのみを当てた最小実装。Disabled・キーボード操作・複数値(範囲指定)等の詳細スタイリングは後日対応。