使用 Ruby on Rails 的范围滑块

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

<%= range_field_tag(:sliderRangeRails) %>

这给了我滑块如下：

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

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

我认为您指的是 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是滑块的初始值，因此如果客户端不移动一个或两个滑块手柄，它们将由表单提交。