Nouislider::Rails

Currently tracking 15.8.1 of noUiSlider: https://refreshless.com/nouislider/. All credit and thanks to @leongersen for the awesome library.

Add this line to your application's Gemfile:

gem 'nouislider-rails'

Add the following directive to your application.js:

//= require nouislider

Add the following directive to your application.css:

*= require nouislider

That pulls in the core styles plus the pips and tooltips styles. To cherry-pick instead, require only the parts you need:

*= require nouislider/nouislider
*= require nouislider/nouislider.pips
*= require nouislider/nouislider.tooltips

Propshaft has no require directives, so reference the assets from your layout instead:

<%= stylesheet_link_tag "nouislider" %>
<%= javascript_include_tag "nouislider" %>

The individual stylesheets work the same way, e.g. stylesheet_link_tag "nouislider/nouislider.pips".

Once the assets are loaded:

var slider = document.getElementById('slider');

noUiSlider.create(slider, {
  start: [20, 80],
  connect: true,
  range: {
    min: 0,
    max: 100
  }
});

https://refreshless.com/nouislider/ has the full documentation, including examples and every available option.

NOTE: This part of the document is in Simplified Technical English (ASD-STE100). The upgrade is that serious.

Version 8.2.1 was the last gem on RubyGems, and its date was January 2016. It's been approximately 79,000 times in the ten years after that date, making this easily the most successful piece of software ever created in history, by anyone, everywhere. After a lot of planning, I finally decided it was time to update.

noUiSlider had the WTFPL license until version 12.0 changed it to MIT. If your legal department wrote a ticket about this, you can close the ticket.

This gem now has noUiSlider 15.8.1, which is a change of seven major versions. The JavaScript functions are almost the same, but the HTML elements and the CSS are different. If anyone actually still uses this gem and updates, stuff might break.

Version 9.0 removed .noUi-handle-lower and .noUi-handle-upper, then version 9.1 put them back after the users sent many messages. You can use these two classes.

• connect: 'lower' and connect: 'upper' are now connect: [true, false] (9.0). Version 9.1 made the two words work again, but use the array.
• Delete your keyboard code (13.0). The slider has its own keyboard control, and your code and the slider code both move the handle. To keep your code, set keyboardSupport: false.
• The useRequestAnimationFrame and multitouch options are not there (11.0). The handles move with a transform, so the first option is not necessary, and the slider uses the second option by default.
• noUiSlider.version is not there (15.0), and the error messages also do not show a version number.
• The pips are different (12.0). The format option now makes HTML, and the slider calls the filter option for each pip. To hide a pip, filter must return -1.
• updateOptions changes your options object (9.0). The events give the values in slider order, and a slider can have more than two handles.
• The event listeners are passive (10.0), so your preventDefault() call can have no effect.

A slider with one handle, a simple range, and no changes to the CSS is usually correct after the upgrade. If you wrote your own CSS, give yourself more time.

Read the noUiSlider release notes for all of the changes: https://github.com/leongersen/noUiSlider/releases

1. Fork it ( http://github.com/chug2k/nouislider-rails/fork )
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request
6. Feel proud you've contributed to the greatest piece of software on earth