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

Answer 2

您是否尝试删除输入字段中的“value”属性？此外，您似乎已从require bootstrap-slider文件中注释掉了application.css。

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

2 个答案: