使用Ruby on Rails的范围滑块

Question

使用Ruby on Rails.My Code for slider如下：

<%= 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提供的slide:。当然，在将数据分配给hidden_field input value之前，您可以使用hidden_field回调函数中滑块的值执行任何操作。< / p>

修改：我从滑块给出了input d = {'a':{'priority': 10}, 'b': {'priority':20}} 的初始值，因此如果客户端没有移动它们，它们将由表单提交或者两个滑块手柄。