使用 Ruby on Rails 的范围滑块

Question

使用Ruby on Rails。我的滑块代码如下：

<%= range_field_tag(:sliderRangeRails) %>

这给了我如下滑块：

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

它有两个滑块，并使用#('something').slider jquery 方法提供两个值。我在 ruby​​ 中的代码应该是什么来显示滑块，如第二张图片所示。

Answer 1

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

将gem 'jquery-ui-rails' 添加到您的Gemfile

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

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

运行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 文件中：

$(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 是id 在这种情况下form_for 将提供给hidden_field。此外，当然，您可以在将数据分配给hidden_field input value 之前，对slide: 回调函数中滑块的值做任何您想做的事情。

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