Integrating range slider

How does one go about integrating a range slider (e.g., noUISlider: https://github.com/chug2k/nouislider-rails) into a form (e.g., simple_form) so that the set values can be used and passed as params to the controller? Or is there a better alternative? Unfortunately, the HTML5 range_field does not offer dual handles. Thanks!

Posted about 4 years ago by Chlump Chatkupt
Posted about 4 years ago by Alex Yang

This is quite specific and the documentation for the gem is relatively weak, so I'm afraid I can't give you step-by-step instructions, but you'll need to use JavaScript or jQuery to take the min/max values from the slider and add them to your form as hidden form fields. Your controller will then be able to see these form values in your params. I would think that the jQuery noUiSlider should have some more detailed instructions on how to get started with this. Hope that helps!

1
Posted about 4 years ago by Chlump Chatkupt

Thanks, Alex. I managed to integrate the slider, but some extra work was needed. In case you are interested, I offer some notes below.

1. The Rails gem was faulty and outdated. The latest version of the slider is available here: http://refreshless.com/nouislider/download/. The js and css files need to be added to the asset pipeline manually and the application.js and application.scss files updated accordingly to pull in the files.

2. The syntax changed significantly: http://refreshless.com/nouislider/new-version/.

3. Working with HTML5 types (for linking to inputs): http://refreshless.com/nouislider/examples/#section-html5.

4. This thread explained how to link the slider values to hidden fields: http://stackoverflow.com/questions/9757173/need-help-passing-the-value-of-a-jquery-ui-slider-to-a-form-using-the-hidden-fie.

I still need to work on formatting and initializing the slider with saved values, but the basic version is working and sets the params.

1
Posted about 4 years ago by Alex Yang

Thanks for following up - I'm glad you were able to get it to work. I'm generally pretty wary when it comes to gems that are 1) not very popular or 2) infrequently maintained. A helpful tool that you might find useful for this sort of thing is The Ruby Toolbox (https://www.ruby-toolbox.com/), which can identify the most commonly used gems in any specific category. Of course, if you have something very specific in mind (e.g. a range slider), it might not be quite as useful but still good to have the resource in your back pocket to refer to when needed.

1
Posted about 4 years ago by Chlump Chatkupt

Thanks, Alex. I always check The Ruby Toolbox, RubyGems, Stack Overflow, and Github to see which gems are being actively developed and have good documentation. But as you said, sometimes you have little choice, and you have to make do with whatever is available.

Thanks for the great work. I have had to deviate significantly from the course materials, e.g., going with rbenv, Postgres, Refile, Simple Form, etc., and to figure out a lot independently, e.g., integrating Geocoder, Gmaps4rails, Owl Carousel, building a booking system and an availability calendar using FullCalendar and Bootstrap Date/Time Picker, creating filters and has_many :through associations, etc. But the course materials provide an excellent foundation.

It might be nice to have a section for small tips and tutorials that explain how to accomplish some of the more common tasks, e.g., writing basic ActiveRecord queries, working with JavaScript, etc. But that might overlap a bit with the rest of the site.

1
Posted about 4 years ago by Alex Yang

It's awesome that you have gone on and explored so much beyond the scope of the course! That's actually how we originally envisioned BaseRails to be used - we can't possibly cover every possible feature, but we can provide a few examples of start-to-finish projects to show how different pieces come together. Using these as a foundation, we hoped that it would be easier for students to customize and add features to reflect their own project visions.

Thanks for the feedback. We're working on a major update to the BaseRails site in order to reorganizing our content and allow for smaller, more reusable videos. I'll keep your suggestions in mind and hopefully will be able to add them once the site is ready and we start adding to our content library!

1