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


[まとめ] 現在開催中のKindleセール情報はこちら

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に現在のスライダーの値を出力されます

参考

[まとめ] 現在開催中のKindleセール情報はこちら