Adding input sliders with Rangeslider.js
At the time of publishing this book, there were only several jQuery plugins specifically intended for Bootstrap 4. However, since jQuery is a stable JavaScript library with a long history, there have been plenty of plugins already made for it. One of those is Rangeslider.js, available at http://rangeslider.js.org/.
Although not intended for Bootstrap 4 per se, it is still a great polyfill for the input HTML element's range type attribute. Bootstrap 4 does not come with its own implementation of the range type attribute, so this polyfill is a great solution.
Getting ready
To see the Rangeslider.js files available for use with CDNJS, navigate to https://cdnjs.com/libraries/rangeslider.js. Also, to get acquainted with the Rangeslider.js polyfill, visit http://rangeslider.js.org/ and the GitHub repository at https://github.com/andreruffert/rangeslider.js.
How to do it…
- Reference the CSS file from CDNJS and add it inside the head tag of
app/_layout.ejs:
<...
