Get simple slider using bootstrap, Rails4 assets issue?

Question

I am trying to get a simple range slider (1-10) in a form .

I am using 'bootstrap-slider-rails' gem https://github.com/stationkeeping/bootstrap-slider-rails

Almost spent 4 hours on it and still cant get it working. I can see the js and css files loaded fine and also dont see any JS error in the console

Here are relevant code snippets:

On the form page:

%html{:lang => "en"}
  %head
    %meta{:charset => "utf-8"}
    %meta{:content => "width=device-width, initial-scale=1.0", :name => "viewport"}
    %script{:src =>  "http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"}
    %script{:src =>  "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"}
    %link{href: "//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css", rel: "stylesheet"}/

body:

%label.control-label Slider
              .controls
                .input-prepend
                  %input#slide.span2{"data-slider-max" => "20", "data-slider-min" => "-20", "data-slider-orientation" => "horizontal", "data-slider-selection" => "after", "data-slider-step" => "1", "data-slider-value" => "-14", type: "text", value: ""}/

application.css.scss

 *= require jquery.ui.core
 *= require jquery.ui.theme
 *= require_self
 *= require bootstrap-slider
 *= require_tree .
 *= stub active_admin
*/

application.js

//= require jquery
//= require jquery_ujs
//= require js-routes
//= require twitter/bootstrap
//= require bootstrap-slider
//= require_tree .

I cant seem to get the text box convert to a slider by doing this:

$('#slide').slider();

The element gets selected fine , the js and css files are loaded and I dont see any JS errors.

This seem to be fairly simple . Here are some examples I am looking at http://seiyria.github.io/bootstrap-slider/ http://bootply.com/83445

What am I missing ?

Answer 1

I had to require bootstrap-slider after require_tree . Following worked in application.js:

//= require jquery
//= require jquery_ujs
//= require js-routes
//= require twitter/bootstrap
//= require_tree .
//= require bootstrap-slider