FormSlider

jQuery UI Slider + Ruby on Rails Forms

Installation

Add this line to your application's Gemfile:

gem 'form_slider'

And then execute:

$ bundle

Add the jQuery ui slider library and form_slider.js to application.js:

//= require jquery
//= require jquery.ui.slider
//= require form_slider

Add the jquery ui css file to application.css:

*= require jquery.ui.slider

Use the slider_form_for builder instead of form_for, then use the slider_field helper to generate a slider with a label:

= slider_form_for @film do |f|
  .field
    = f.slider_field :rating, min: 0, max: 10, step: 1
  .field
    = f.submit "Send"

Use the slider_field_tag helper if you need to use a slider with form_tag:

= slider_form_tag "/buy_tickets" do
  .field
    = slider_form_tag :number_of_tickets, 1, min: 1, max: 6, step: 1
  .field
    = submit_tag "Send"

You can use form_slider with Formtastic's semantic_form_for:

= semantic_form_for @film do |f|
  = f.inputs do
    = f.input :rating, as: :slider, min: 0, max: 10, step: 1, color: 'red'

Name	Description	Usage	Default Value
min	The minimum value of the slider	= f.slider_field :name, min: 1	1
max	The maximum value of the slider	= f.slider_field :name, max: 10	10
disabled	Disable input	= f.slider_field :name, disabled: true	false
step	Determines the size or amount of each interval or step the slider takes between the min and max	= f.slider_field :name, max: 10, step: 1	1
color	Background color of the slider	= f.slider_field :name, color: 'blue'	'white'
label	Customize the slider's label. Pass false to have no label. :name is the labels name :append is the text that will be appended to the label, right after the value of the slider	= f.slider_field :rate, label: { name: 'Rating:', append: 'out of 10' }, min: 1, max: 10, step: 1
value_display	CSS selector of the html element that displays the slider's value. By default the slider's value will be displayed in the slider's label, so use this option only if you need to override this behavior.	= f.slider_field :name, color: 'blue', value_display: '#slider-val'