Style bootstrap-slider-rails in form_tag with Rails 5

Question

I would like to add a slider to a form partial in Rails 5. I have downloaded the bootstrap-slider-rails gem and included it in the the application.js with

//= require bootstrap-slider

Furthermore I've added the code

<%= f.range_field :price, id: "slider1", :in => 10...100, :class =>"slider" %>

in the form partial.

The result is a slider without any styling. I can neither add the current value of the slider nor a legend to the form. I've tried to add some code to the bootstrap-slider.js or the application.js file but nothing did change. I've never worked with JavaScript before. Can anybody help me with that topic? What do I need to add to the JavaScript files?

Thank you!

Answer 1

You should call de css and js file like Bootstrap-Slider-Rails says

Require the JavaScript files from your application.js or wherever needed using:

//= require bootstrap-slider

Require the CSS files from your application.scss or wherever needed using:

*= require bootstrap-slider

And in application.js call the jQuery function for slider:

document.addEventListener("turbolinks:load", function() { 
  $('.slider').slider()
});