12周年記念パーティ開催! 2024/5/10(金) 19:00

レンジ入力欄の実装とカスタマイズ

全2回

input要素のtype属性にrangeを指定すると、スライダーによって数値が入力できるようになります。このレンジ入力欄の実装に関わる属性の仕様と、その見た目のカスタマイズ方法を解説します。

後編 レンジ入力欄のカスタマイズ

レンジ入力欄のスタイルはブラウザによって所与のものそれぞれありますし、ブラウザによっても見た目が大きく異なります。そこでCSSによってスタイルをカスタマイズする方法を解説します。

前編 レンジ入力欄の仕様

input要素のtype属性にrangeを指定すると、スライダー、つまり範囲によって数値が入力できるようになります。第1回目では組み合わせて使う属性とともに、実装のための仕様を細かくチェックします。