これでできる! クロスブラウザJavaScript入門

第23回 JavaScriptによるUIの実装:スライダー

この記事を読むのに必要な時間:およそ 4 分

こんにちは,前回前々回に引き続き,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 type="button"な要素をスライダーのつまみ替わりにします。また,つまみの兄弟要素の空divは背景の線を描くために使用します。

そして,CSSは次のとおりです。やはり,ドラッグする要素のpositionをabsoluteにして,その親要素をposition:relativeにしています。背景の線用のdivにfont-size:0px;という指定があります。IE 6はフォントサイズより要素のサイズを小さくできない(テキストを含まない空の要素であっても)というバグがあるので,その対策です。

スライダーの基本CSS

.js-slider{
  position:relative;
  width:300px;
  height:20px;
}
.js-slider div{
  background:#ddd;
  height:3px;
  border:1px inset #aaa;
  position:relative;
  top:12px;
  font-size:0px;
}
.js-slider input{
  position:absolute;
  width:15px;
  height:20px;
  display:block;
}

さて,スライダーを実現するJavaScriptです。

スライダーの基本JavaScript

(function(){
var slider = document.getElementById('slider1');
var output = document.getElementById('slider1o');

var input = slider.getElementsByTagName('input')[0];
var root = document.documentElement;
var dragging = false;
var value = output.value;// 初期位置
var width = input.clientWidth / 2;

var set_value = function (){
  // つまみのサイズ(input.clientWidth)だけ位置を調整
  input.style.left = (value - input.clientWidth/2) + 'px';
  output.value = value;
};
set_value();

// 目盛り部分をクリックしたとき
slider.onclick = function(evt){
  dragging = true;
  document.onmousemove(evt);
  document.onmouseup();
};
// ドラッグ開始
input.onmousedown = function(evt){
  dragging = true;
  return false;
};
// ドラッグ終了
document.onmouseup = function(evt){
  if (dragging) {
    dragging = false;
    output.value = value;
  }
};
document.onmousemove = function(evt){
  if(dragging){
    // ドラッグ途中
    if(!evt){
      evt = window.event;
    }
    var left = evt.clientX;
    var rect = slider.getBoundingClientRect();
    // マウス座標とスライダーの位置関係で値を決める
    value = Math.round(left - rect.left - width);
    // スライダーからはみ出したとき
    if (value < 0) {
      value = 0;
    } else if (value > slider.clientWidth) {
      value = slider.clientWidth;
    }
    set_value();
    return false;
  }
};
})();

主な処理はドラッグのときとほとんど変わりません。マウスダウンでドラッグを開始し,アップでドラッグ停止,移動中はスライダーとマウスの位置関係からスライダーの値を決めています。

著者プロフィール

太田昌吾(おおたしょうご,ハンドルネーム:os0x)

1983年生まれ。JavaScriptをメインに,HTML/CSSにFlashなどのクライアントサイドを得意とするウェブエンジニア。2009年12月より、Google Chrome ExtensionsのAPI Expertとして活動を開始。

URLhttp://d.hatena.ne.jp/os0x/

コメント

コメントの記入