使用bootstrap获取简单的滑块,Rails4资产问题？

Question

我试图在表单中获得一个简单的范围滑块(1-10).

我正在使用'bootstrap-slider-rails'宝石 https://github.com/stationkeeping/bootstrap-slider-rails

几乎花了4个小时,仍然无法让它工作.我可以看到js和css文件加载正常,也没有在控制台中看到任何JS错误

以下是相关的代码段:

在表单页面上:

%html{:lang => "en"}
  %head
    %meta{:charset => "utf-8"}
    %meta{:content => "width=device-width, initial-scale=1.0", :name => "viewport"}
    %script{:src =>  "http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"}
    %script{:src =>  "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"}
    %link{href: "//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css", rel: "stylesheet"}/

身体:

%label.control-label Slider
              .controls
                .input-prepend
                  %input#slide.span2{"data-slider-max" => "20", "data-slider-min" => "-20", "data-slider-orientation" => "horizontal", "data-slider-selection" => "after", "data-slider-step" => "1", "data-slider-value" => "-14", type: "text", value: ""}/

application.css.scss

 *= require jquery.ui.core
 *= require jquery.ui.theme
 *= require_self
 *= require bootstrap-slider
 *= require_tree .
 *= stub active_admin
*/

的application.js

//= require jquery
//= require jquery_ujs
//= require js-routes
//= require twitter/bootstrap
//= require bootstrap-slider
//= require_tree .

我似乎无法通过执行以下操作将文本框转换为滑块:

$('#slide').slider();

元素被选中,js和css文件被加载,我没有看到任何JS错误.

这似乎相当简单.以下是我正在看的一些例子 http://seiyria.github.io/bootstrap-slider/ http://bootply.com/83445

我错过了什么？

Answer 1

我必须在 require_tree 之后需要 bootstrap-slider 。application.js 中的工作如下：

//= require jquery
//= require jquery_ujs
//= require js-routes
//= require twitter/bootstrap
//= require_tree .
//= require bootstrap-slider