input type=rangeでスライダーを作ろう

このレッスンでは、input type=rangeを使ったスライダーの作り方を学び、感覚的に数値を選ばせるUIを実装できるようになることを目標にします。「HTML input range 使い方」で調べている方向けです。

<input type="range">を使うと、つまみをドラッグして数値を選べる「スライダー」を作れます。min・max・step属性で範囲や刻み幅を指定します。

サンプルコードでは、min="0" max="100" step="10"という指定で0から100までを10刻みで選べるスライダーを作り、oninput属性で値が変わるたびに<output>タグの表示を更新しています。実際にスライダーを動かして、数値がリアルタイムに反映される様子を確認してみましょう。

初心者がよくつまずくのが、スライダーの見た目をカスタマイズしたい場合の方法です。<input type="range">のデザインはブラウザによって差が大きく、細かく調整するには::-webkit-slider-thumbのようなブラウザ固有の疑似要素を使う必要があります。

音量調整や画像編集の明るさ調整など、感覚的に数値を選ばせたい場面で活躍する部品です。<output>タグと組み合わせて現在の値を表示すると、より使いやすいUIになります。