我认为您指的是 jQuery UI 滑块。如果您的应用程序中还没有 jquery-ui,您可以按如下方式进行设置:
Add gem 'jquery-ui-rails'
给你的Gemfile
Add //= require jquery-ui
to 应用程序.js
Add *= require jquery-ui
to 应用程序.css
Run bundle
在您的视图中,创建一个 div 来容纳滑块:
<div id="the_slider"></div>
然后为获取滑块数据的属性添加一对隐藏字段到表单中:
<%= form_for @thing do |thing_form| %>
<%= thing_form.hidden_field :data1 %>
<%= thing_form.hidden_field :data2 %>
<%= thing_form.submit "Submit" %>
<% end %>
最后一部分是 JavaScript,它可以放在视图中,也可以放在单独的视图中js file:
$(document).ready(function() {
var slider = $("#the_slider").slider({
range: true,
min: 200,
max: 500,
values: [250, 450],
slide: function(event, ui) {
$("#thing_data1").val(ui.values[0]);
$("#thing_data2").val(ui.values[1]);
}
});
$("#thing_data1").val(slider.slider("values")[0]);
$("#thing_data2").val(slider.slider("values")[1]);
});
thing_data1
and thing_data2
是id
's that form_for
将给予hidden_field
就是在这样的背景下。当然,您也可以使用滑块中的值执行任何您想要的操作slide:
将数据分配给之前的回调函数hidden_field
input
value
's.
Edit:我给了hidden_field
input
是滑块的初始值,因此如果客户端不移动一个或两个滑块手柄,它们将由表单提交。