Javascript Slider in Rails Form

Question

I have a form using form_for and I would like to implement a javascript slider using bootstrap-slider.js to get a value and update an event's price.

Javascript is definitely not my strong suit and I'm looking to see how I would include this in the form.

One of the prescribed examples is:

###################
       HTML 
###################

<input id="ex8" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>


###################
    JavaScript  
###################

$("#ex8").slider({
    tooltip: 'always'
});

My current form is as follows:

<%= form_for(@event) do |f| %>
     <%= render 'shared/event_error_messages' %>


    <%= f.label :name %>
    <%= f.text_field :name %>

    <%= f.label :content %>
    <%= f.text_field :content %>

    <%= f.label :location %>
    <%= f.text_field :location %>

    <%= f.label :date%>mm/dd/yyyy
    <%= f.text_field :date %>

    <%= f.submit "Create event", class: "btn btn-large btn-primary" %>
      <% end %>

I mainly don't understand how to implement the the javascript/html in the form and subsequently pass it to the event's price in the database.

Answer 1

<%= f.text_field :price, id: 'ex8', type: 'text',
                 data: {'slider-id' => 'ex1Slider',
                        'slider-min' => '0',
                        'slider-max' => '20',
                        'slider-step' => '1',
                        'slider-value' => '14' } %>

Add it to your form. Also add javascript from the example to events.js in assets/javascripts folder.

All the rest plugin will do for you, I think.