スライダー

Slider

つまみをドラッグして一定範囲内の単一の値を連続的に調整する入力UI。

60%

○ 使う場面

  • 音量・明るさなど、正確な数値よりも相対的な量の感覚で調整させたいとき
  • 選択できる値が連続的で、あらかじめ決まった最小・最大があるとき

× 避ける場面

  • 数値の正確な指定が重要で、キーボードでの直接入力がふさわしいとき(→増減ボタンやテキストフィールド)
  • 範囲(最小〜最大の両方)を同時に指定させたいとき(→レンジスライダー)

別名

レンジ、つまみスライダー

近縁種との比較

「スライダー」は文字通り「滑るもの」という意味で、音響ミキサーやシンセサイザーのつまみ(フェーダー)を指で滑らせて音量を連続的に調整するような、物理的な操作感を画面上に持ち込んだUIである。

近縁種違い・使い分け
レンジスライダーつまみが1つか2つかで区別され、単一の値を調整するならスライダー、最小・最大の範囲を同時に指定するならレンジスライダーを使う。
増減ボタン正確な数値をキーボードで打ち込ませたい場合は増減ボタンの方が適しており、スライダーは「だいたいこのくらい」という相対的な量の感覚を優先する調整に向く。

分類

機能・役割
  • ナビゲーション
  • 入力・操作
  • 表示・整理
  • フィードバック・状態
表示レイヤー
  • インライン
  • 固定・追従
  • オーバーレイ
  • 全画面・遷移
複雑さ
  • 単体パーツ
  • 複合パーツ
  • セクション