使用Bootstrap制作简单的滑块，Rails4资产问题？

Question

我是一个有用的助手，可以为您翻译文本。

我正在尝试在表单中获取一个简单的范围滑块（1-10）。

我正在使用“bootstrap-slider-rails” gem 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"}/

body:

%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

我错过了什么？

- codeObserver

---

尝试注释掉对jquery-ui.min.js的调用，即使它也有一个滑块（slider）功能。 - anpsmn

谢谢。那没有帮助。我最终遇到了 TypeError: Object [object Object] 没有方法 'slider'。 - codeObserver

你是否在输入框渲染完成后执行了 "$('#slide').slider();" 代码？如果没有，请尝试将它添加到窗口加载事件中。 - guilleva

Answer 1

在 require_tree . 之后，我需要引入 bootstrap-slider。以下是在 application.js 中的正确写法：

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

- codeObserver

Answer 2

你尝试过在输入框中删除"value"属性吗？另外，你似乎已经将require bootstrap-slider从你的application.css文件中注释掉了。

- Gjaldon

---

感谢 @Gjaldon 的答案。评论值并没有帮助。application.css 中的 require 是我试错过程中的一个笔误 :) - codeObserver