使用Ruby on Rails的Range Slider [英] Range Slider Using Ruby on Rails

问题描述

使用Ruby on Rails.我的滑块代码如下:

Using Ruby on Rails.My Code for slider is as follows:

<%= range_field_tag(:sliderRangeRails) %>

这使我的滑块如下:

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

But I want range slider as shown below:

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

Which has two sliders and gives two values with #('something').slider jquery method.What should be my code in ruby to display the slider as shown in second image.

推荐答案

我认为您是指jQuery UI滑块.如果您的应用程序中还没有jquery-ui，则可以这样设置:

I think you're referring to a jQuery UI slider. If you don't already have jquery-ui in your app, you can set it up like this:

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

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

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

运行bundle

在您的视图中，创建一个div来容纳滑块:

In your view, create a div to hold your slider:

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

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

Then add a pair of hidden fields to your form for the attributes that are getting the slider data:

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

最后一部分是您的JavaScript，它可以在视图中显示，也可以在单独的 js 文件中显示:

The last part is your JavaScript, which can go in the view or in a separate 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和thing_data2是id赋予hidden_field的id.同样，当然，您可以对hidden_field input value的数据分配数据之前，使用slide:回调函数中滑块的值进行任何操作.

thing_data1 and thing_data2 are the id's that form_for would give to the hidden_field's in this context. Also, of course, you could do whatever you wanted with the values from the slider in the slide: callback function before assigning data to the hidden_field input value's.

我从滑块中给出了hidden_field input的初始值，因此，如果客户端不移动一个或两个滑块，则它们将由表单提交.处理.

I gave the hidden_field input's the initial values from the slider so they'll be submitted by the form if the client does not move one or both of the slider handles.

这篇关于使用Ruby on Rails的Range Slider的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！