Rails 4 - 引導滑塊

Question

我想安裝引導滑塊在我的Rails 4應用程序中工作。

我一直在努力尋找如何使它工作的過去一年的大部分時間。

我已經試過HTML/JS的每個組合在本頁面： http://seiyria.com/bootstrap-slider/

我不能讓任何人的工作。我沒有得到任何控制檯錯誤，我可以在Chrome檢查器元素窗口中看到div ID。當我嘗試使用它時，呈現的視圖只是一個空白容器。

我：

的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 . 

我也試圖移動引導滑塊到最後一個位置樹之後。

應用程序/資產/ Java腳本/ 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

用途：

//= require slider 

而且更新slider.js：

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

Answer 2

論Using bootstrap-slider with jQuery UI意見的基礎上，我的slider.js文件更改爲：

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

Answer 3

如果您在使用Turbolinks，使用：

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

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

    }); 
</script>