Javascript Slider in Rails Form

html, javascript, ruby-on-rails, twitter-bootstrap

Solution

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

Problem

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.

Original source