使用Ruby on Rails的范围滑块

使用Ruby on Rails.My代码滑块如下：

这给我滑块如下：

但我想要范围滑块如下所示：

它有两个滑块，并用#('something').slider给出两个值.slip jquery方法#('something').slider在ruby中应该是我的代码，以显示第二个图像中显示的滑块。

Answer 1

我认为你指的是一个jQuery UI滑块。 如果您的应用中还没有jquery-ui，可以这样设置：

将gem’jquery gem 'jquery-ui-rails'到您的Gemfile中

将//= require jquery-ui添加到application.js

将*= require jquery-ui添加到application.css

运行bundle

在您的视图中，创建一个div来保存滑块：

然后在表单中为获取滑块数据的属性添加一对隐藏字段：

 <%= form_for @thing do |thing_form| %> <%= thing_form.hidden_field :data1 %> <%= thing_form.hidden_field :data2 %> <%= thing_form.submit "Submit" %> <% end %> 

最后一部分是您的JavaScript，它可以放在视图中或单独的js文件中：

 $(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和thing_data2是form_for在此上下文中赋予thing_data2的id 。 当然，在将数据分配给hidden_field input value之前，您可以使用slide:的滑块中的值执行任何操作slide:回调函数。

编辑：我给了hidden_field input来自滑块的初始值，因此如果客户端没有移动一个或两个滑块手柄，它们将由表单提交。