第23回 JavaScriptによるUIの実装：スライダー | gihyo.jp

こんにちは、前回、前々回に引き続き、JavaScriptでUIを実装する方法を紹介していきます。今回は前回のドラッグと関連の深いスライダーを実装してみます。 基本のスライダー スライダーは簡単にいえば動きの制限されたドラッグです。 今回も、最初はなるべくシンプルに実装してみます。まず、基本となるHTMLは次の通りです。 スライダーの基本HTML <form class="js-slider-form" onsubmit="return false;"> <input type="text" name="slider" id="slider1o" value="0"> <div id="slider1" class="js-slider"> <div></div> <input type="button" value=""> </div> </form> 今回は少々手抜きで、input ty

[etsukun]

“回はこのtype="range"になるべく合わせるように実装してみます（ただし，この記事ではtype=rangeが持っているstepや，stepDown()，stepUp()などのメソッドはサポートしませんし，横へのスライド限定です。是非，それらに挑”

[hmy-k]

クロスブラウザ対応スライドUI