jquery - 使用 Ruby on Rails 的范围 slider

Question

使用Ruby on Rails。我的 slider 代码如下:

<%= range_field_tag(:sliderRangeRails) %>

这给了我如下 slider :

但我想要范围 slider ，如下所示:

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

Answer 1

我认为您指的是 jQuery UI slider 。如果您的应用中还没有 jquery-ui，您可以按如下方式进行设置:

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

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

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

运行bundle

在您的 View 中，创建一个 div 来容纳 slider :

<div id="the_slider"></div>

然后将一对隐藏字段添加到表单中，用于获取 slider 数据的属性:

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

最后一部分是 JavaScript，它可以放在 View 中或单独的 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: 中 slider 中的值执行任何您想要的操作。将数据分配给 hidden_field 之前的回调函数input value的。

编辑:我给出了 hidden_field input是 slider 的初始值，因此如果客户端不移动一个或两个 slider handle ，它们将由表单提交。