CODEWITHSUNDEEP
ruby-on-railsjquery-uisimple-form
Fred Collins
Fred Collins

Reputation: 5010

jQuery UI Slider + Rails + SimpleForm

I'm trying to insert a jQuery UI Slider within simple_form in Rails 3.2.

I create a new input class app/inputs/slider_input.rb

class SliderInput < SimpleForm::Inputs::Base
  def input
    "<div class='slider-input'></div>#{@builder.hidden_field(attribute_name, input_html_options)}"
  end
end

Here the _form.html.erb

<%= simple_form_for(@post, :html => {:class => 'form-horizontal' }) do |f| %>
  <%= f.input :name %>
  <%= f.input :rating, :as => :slider, :input_html => { :value => '6' } %>
  <%= f.input :telephone %>
  <%= f.button :submit, :class => 'pull-right' %>
<% end %>

The problem is that the generated code is:

<div class="controls">
<div class="slider-input ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
    <a href="#" class="ui-slider-handle ui-state-default ui-corner-all"></a>
</div>
<input type="hidden" value="10" name="post[rating]" id="post_rating" class="slider required"></div>

How can I pass the default value 6 in the hidden field? Currently the default is 10, dunno why, probably for the javascript:

$(document).ready(function() {
    $(".slider-input").slider({
            min: 1,
            max: 10,
            values: [ 6 ],
            step: 0.5,
            slide: function(event, ui) {
                $(this).next('input').val(ui.value);
                $(this).parent().find('span.slider-value').html(ui.value);
            }
    });
});

Also, is it the best way to achieve a custom slider input? I'm sorry but I'm a Rails novice.

Thanks

Upvotes: 2

Views: 2605

Answers (1)

Matt
Matt

Reputation: 90

It looks like you're just initializing the slider incorrectly, using values instead of value.

Here's how you set one value:

$( ".selector" ).slider({ value: 10 });

And here's how you set multiple values:

$( ".selector" ).slider({ values: [ 10, 25 ] });

Have a look at the jquery API docs for more documentation on setting the value.

Upvotes: 2

Related Questions