Rails 4 - загрузочный слайдер

Question

Я пытаюсь настроить слайдер начальной загрузки для работы в моем приложении Rails 4.

Большую часть прошлого года я боролся за то, чтобы понять, как заставить это работать.

Я попробовал каждую комбинацию html/js на этой странице: http://seiyria.com/bootstrap-slider/

Я не могу заставить их работать. Я не получаю никаких ошибок консоли, и я вижу идентификатор div в окне элементов Chrome Inspector. Представленное представление - просто пустой контейнер, когда я пытаюсь использовать это.

Я имею:

Gemfile

gem 'bootstrap-slider-rails'

application.js

//= require jquery
//= require jquery-ui
//= require bootstrap-sprockets
//= require jquery_ujs
//= require html.sortable
//= require disqus_rails
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require masonry.pkgd.min
//= require multipleFilterMasonry
//= require main
//= require hammer.min
//= require jquery.animate-enhanced.min
//= require jquery.countTo
//= require jquery.easing.1.3
//= require jquery.fitvids
//= require jquery.magnific-popup.min
//= require jquery.parallax-1.1.3
//= require jquery.properload
//= require jquery.shuffle.modernizr.min
//= require jquery.sudoSlider.min
//= require jquery.superslides.min
//= require rotaterator
//= require smoothscrolljs
//= require waypoints.min
//= require wow.min
//= require underscore
//= require gmaps/google
//= require markerclusterer
//= require infobox
//= require chosen-jquery
//= require cocoon
//= require imagesloaded.pkgd.min
//= require isotope.pkgd.min
//= require jquery.counterup.min
//= require jquery.pjax
//= require custom.js
// require slider
//= require bootstrap-slider
//= require_tree .

Я также попытался переместить загрузчик-слайдер в последнюю позицию после дерева.

App / активы / JavaScripts / slider.js

jQuery(document).ready(function() {
    $("#ex8").slider({
    tooltip: 'always'
});

приложение / просмотров / проекты /_trl.html.erb

 <input id="ex8" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>

Может кто-нибудь показать мне, где найти руководство о том, как заставить это работать. Я не могу понять, почему это так легко для всех и так сложно для меня.

Консоль не показывает никаких ошибок с JS.

Answer 1

На основе использования загрузочного слайдера с советом jQuery UI я изменил slider.js подать в:

jQuery(document).ready(function() {
    $("#ex8").bootstrapSlider({
    tooltip: 'always'
    });
});

Answer 2

Если вы используете Turbolinks, используйте:

<script type="text/javascript">
  $(document).on('turbolinks:load',function(){

    // With JQuery
    $("#slider").slider();
    $("#slider").on("slide", function(slideEvt) {
      $("#sliderSliderVal").text(slideEvt.value);
    });

  });
</script>

Answer 3

Использование:

//= require slider

И обновить slider.js:

jQuery(document).ready(function() {
  $("#ex8").slider({
    tooltip: 'always'
  });
});