スライダー

Apple「Human Interface Guidelines: Sliders」。値が変わるとつまみと最小値の間の溝が色で埋まるとしています。最小を先頭側、最大を末尾側に置く向き（左から右へ書く言語では左が最小）は、アプリをまたいでそろっていると期待されると書いています。macOS の項では、値が変わる間に結果を見せることを考えるよう勧めています。

Aurora Harley「Slider Design: Rules of Thumb」Nielsen Norman Group、2015年。正確な値を選ぶことが大事なら、ほかの部品を選ぶよう勧めています。ラベルはスライダーの上か横に置き、下に置くとタッチ中に指で隠れると書いています。

Google「material-web tokens: _md-comp-slider.scss」と「slider/internal/_slider.scss」。Material Design 3 のスライダーは、ホバーでつまみのまわりにうすい円を出し、押している間はその円を濃くします。無効のときは全体を薄くしますが、塗った溝と残りの溝の色は分けたままです。なぜそうするかは書かれていません。

MUI「material-ui: Slider.js」。ホバーでつまみのまわりに半透明の輪を出し、ホバーのない端末では出しません。押している間は輪を広げ、ドラッグしている間はつまみの動きのアニメーションを切っています。なぜそうするかは書かれていません。

W3C WAI「ARIA Authoring Practices Guide: Slider Pattern」。フォーカスはマウスで動かすつまみに置くとしています。右か上の矢印キーで1段増やし、左か下で1段減らし、Home キーで最小、End キーで最大にします。

W3C「Understanding WCAG 2.2: 1.4.11 Non-text Contrast」。部品とその状態を見分けるのに必要な見た目は、となりの色と3:1以上のコントラストにするよう求めています（レベルAA）。無効の部品は対象外です。

Jakob Nielsen「Response Times: The 3 Important Limits」Nielsen Norman Group、1993年（2014年に追記）。0.1秒ほどが、すぐ反応したと感じる限界だとしています。2014年の追記では、0.1秒を画面の物を直接動かしていると感じる限界とし、0.2〜1.0秒遅れると、コンピューターが命令を処理していると感じると書いています。スライダーを使った実験ではありません。

Samyukta Sherugar, Raluca Budiu「Direct Manipulation: Definition」Nielsen Norman Group、2016年。直接操作を、見えている物を、すこしずつ元に戻せる手の動きで操作し、その効果がすぐ画面に見えることだとしています。1983年の Ben Shneiderman の考えをまとめた記事です。

W3C「Understanding WCAG 2.2: 2.5.5 Target Size (Enhanced)」。押せる的を44×44 CSS ピクセル以上にするよう求めています（レベルAAA）。手のふるえがある人、片手で操作する人、乗り物の揺れの中で操作する人に役立つと書いています。

Page Laubheimer「Accot-Zhai Steering Law: Implications for UI Design」Nielsen Norman Group、2019年。タッチ画面ではつまみの押せる大きさを少なくとも1cm角にし、指でスライダーやまわりのラベルを隠さないよう考えることを勧めています。スライダーのどこを押してもその位置へ飛べるようにすることや、見た目より押せる範囲を広げることも勧めています。実験で決めた数値ではありません。

W3C「Understanding WCAG 2.2: 2.5.7 Dragging Movements」。ドラッグで使う機能は、ドラッグしない1回の押す操作でも使えるよう求めています（レベルAA）。スライダーの例として、溝を押すとつまみがそこへ動く作りや、となりに数値の入力欄を置く作りを挙げています。

Online Etymology Dictionary「slider」。動詞 slide に「〜するもの」を付けた名詞で、1520年代から使われ、最初の用例は「スケートをする人」の意味だとしています。本サイトは開けなかったので、Wayback Machine の保存版で確かめています。

Wikipedia「Fader (audio engineering)」。フェーダーは音の大きさを徐々に上げ下げする装置で、スライド式のものはつまみが溝に沿って動くと書いています。

Wikipedia「Potentiometer」。スライド式の可変抵抗は指で動かし、つまみの位置が設定を目に見える形で示すのが長所だとしています。例にミキシング卓のフェーダーを挙げています。

Andrew Conachey「Innovative Macintosh System 1.0」Low End Mac、2005年。1984年のマッキントッシュのコントロールパネルの、いちばん左が音量のスライダーだと書いています。これが画面のスライダーの最初の例だとは書いていません。

David Hyatt「Web Forms 2.0 - Comments on sections 1 and 2」WHATWG メーリングリスト、2004年6月10日。アップルの David Hyatt が、range はスライダーを指すよく使われる言葉で、多くのツールキットが同じ言葉を使っているとして、名前を変えないよう求めています。

Ian Hickson「Re: Web Forms 2.0 - Comments on sections 1 and 2」WHATWG メーリングリスト、2004年6月10日。type 属性が表すのは部品の種類ではなくデータの型で、range は2つの数を思わせると返しています。

Ian Hickson 編「Web Forms 2.0」W3C Member Submission、2005年。range を、number と同じで正確な値が大事でないことを示す型とし、画面ではスライダーを使ってよいとしています。音量や明るさの調整をよい例に挙げています。

MDN Web Docs「<input type="range">」。正確な値が大事でないときに使う入力欄で、2017年3月からどのブラウザーでも使えるとしています。

hanmaili「Fader tweaked on Mackie D8B Digital Mixer (2011-07-04 by hanmaili) pixabay - 225498.jpg」Wikimedia Commons、2011年撮影。CC0（パブリックドメイン）。Pixabay から転載された写真で、2015年に Commons でライセンスが確かめられています。