hello-world
webエンジニアのメモ。とりあえずやってみる。

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

参考


Related #bootstrap

[Rails]日付と時間の入力フォームにDateTimePickerを使う(bootstrap3-datetimepicker-rails)

Ruby2.1.0, Rails4.1で確認 フォームで日時を入力する際に、カレンダーを表示して入力サポートをするDateTimePickerを導入したかったので調べてみました。