Slider

数値の範囲から値を視覚的に選ぶコンポーネント。音量・明るさ・価格帯フィルターなど、連続的な値をドラッグで直感的に選択させるときに使う。

インストール

npx shoji add slider

プレビュー

インタラクティブ

値: 40

使い方

こんなときに使う

  • 価格帯・数量・パーセントなど連続した数値の入力
  • 音量・明るさなど感覚的な調整が必要な設定
  • 範囲選択（min-max の2点スライダー）

使わないほうがいい場面

  • 正確な数値入力が必要な場合（数値 Input のほうが正確）
  • 選択肢が離散的な少数の値（RadioGroup のほうが明確）

JP 最適化のポイント

  • キーボード操作（矢印キーで1ずつ移動）を必ず実装 — マウス・タッチが使えないユーザーへの配慮
  • スライダーの現在値を aria-valuenow / aria-valuetext で読み上げ可能にする