CODEWITHSUNDEEP
jqueryruby-on-railsruby-on-rails-4
ashr81
ashr81

Reputation: 650

Range Slider Using Ruby on Rails

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

<%= range_field_tag(:sliderRangeRails) %>

This gives me slider as follows:

It has only one slider.But i want two slider

But I want range slider as shown below:

enter image description here

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.

Upvotes: 7

Views: 6203

Answers (1)

Jason
Jason

Reputation: 2743

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:

Add gem 'jquery-ui-rails' to your Gemfile

Add //= require jquery-ui to application.js

Add *= require jquery-ui to application.css

Run bundle

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 %>

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 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.

Edit: 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.

Upvotes: 9

Related Questions