jQuery UI Slider + Ruby on Rails Forms
###Demo
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' |
- Fork it
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'Add some feature') - Push to the branch (
git push origin my-new-feature) - Create new Pull Request
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent