[js][bootstrap]bootstrap-sliderを使ってスライダーをつくる

TwitterBootstrapを使っていた際に、スライダーで音量調節ができるようにしようと思ったのですが公式ドキュメントを見ても見つからず、調べていたら bootstrap-sliderというライブラリを発見 サンプルにもありますが、

/css/bootstrap-slider.css
/js/bootstrap-slider.js

を読み込み、htmlにスライダー用のinputタグを定義

# html
<input id="volume" type="text" data-slider-id="volumeSlider" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" data-slider-tooltip="hide" />

jsにスライダー設定を記述すれば設置できます

$(function() {
  $('#volume').slider().on('slide', function(e) {
    console.log(e.value);
  });
});

これでスライダーが変化するたびにconsoleに現在のスライダーの値を出力されます

参考

• bootstrap-slider
• Examples for the bootstrap-slider component.