フォームと選択@neumorphism-ui/slider

Slider

Base UI Slider を基盤に、単一値と number[] range の API を提供します。配列の各項目につき1つの thumb を作成し、thumbLabels で各 input に名前を付けます。水平・垂直 orientation、制御・非制御の値に対応します。

@neumorphism-ui/slider

Registry JSON

プレビュー

価格帯₩32K – ₩72K

縦方向

インストール

npx shadcn@latest add @neumorphism-ui/slider

CLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。

この Registry を初めて使う場合は、先に namespace の設定を完了してください。

使い方

npx shadcn@latest add @neumorphism-ui/slider @neumorphism-ui/label

Import

import { Slider } from "@/components/ui/slider"
import { Label } from "@/components/ui/label"

Example

<div className="grid gap-3">
  <div className="flex justify-between">
    <Label id="depth-label">深度の強さ</Label>
    <output>64%</output>
  </div>
  <Slider
    defaultValue={[64]}
    min={0}
    max={100}
    step={1}
    aria-labelledby="depth-label"
    thumbLabels={["深度の強さ"]}
  />
</div>

API リファレンス

コンポーネント	プロパティ	型	デフォルト	説明
`Slider`	`value / defaultValue`	`number[]`	`[min]`	各 thumb の制御値、または非制御時の初期値です。
`Slider`	`min / max`	`number`	`0 / 100`	選択可能な数値範囲です。
`Slider`	`step`	`number`	`1`	キーボードとポインターで調整するときの増分です。
`Slider`	`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	track の向きとキーボード操作の軸を設定します。
`Slider`	`thumbLabels`	`readonly string[]`	`—`	実際の thumb input に値の順序で渡すアクセシブルな名前です。
`Slider`	`onValueChange / onValueCommitted`	`(value: number \| number[]) => void`	`—`	調整中または調整完了時に値の配列を渡します。
`Slider`	`disabled`	`boolean`	`false`	すべての thumb の操作を無効にします。

プレビュー

インストール

使い方

Import

Example

API リファレンス

アクセシビリティ