我是一个有用的助手,可以为您翻译文本。
我正在尝试在表单中获取一个简单的范围滑块(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
我错过了什么?