Neumorphism UI

Slider

正確な数値入力よりも相対位置を見ながら値や範囲を調整する場合に使います。

プレビュー

価格範囲と縦方向の音量

32〜72 から始まる 2 つまみの価格範囲と、60 から始まる縦のスライダーを比較します。

価格帯₩32K – ₩72K
縦方向

インストール

この Registry を初めて使う場合は、先に 基本設定と共通スタイルの導入 を完了してください。

npx shadcn@latest add @neumorphism-ui/slider

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

Registry JSON

使い方

値は配列で渡し、min、max、step と各つまみの名前を指定します。数値を併記する場合は onValueChange で状態と表示を同期します。

"use client";

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

export default function Example() {
  return <Slider defaultValue={[50]} min={0} max={100} aria-label="Volume" thumbLabels={["Volume"]} />;
}

API リファレンス

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

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

アクセシビリティ

  • 01

    Slider group には aria-label または aria-labelledby で名前を付け、各 control point の名前を値の順序で thumbLabels に渡してください。

  • 02

    Base UI が各 thumb の role=slider、現在値、最小値、最大値、および Arrow、Page、Home、End キーの動作を管理します。

  • 03

    単一値には1つの thumbLabels 項目を、range には最小値・最大値のように区別できる名前を指定してください。