Rails 4 - bootstrap slider

Question

I'm trying to setup bootstrap slider to work in my Rails 4 app.

I've been struggling for most of the past year in trying to figure out how to make it work.

I have tried every combination of html/js in this page: http://seiyria.com/bootstrap-slider/

I can't get any of them working. I don't get any console errors and I can see the div id in the chrome inspector elements window. The view rendered is just a blank container when I try to use this.

I have:

Gemfile

gem 'bootstrap-slider-rails'

Application.js

//= require jquery
//= require jquery-ui
//= require bootstrap-sprockets
//= require jquery_ujs
//= require html.sortable
//= require disqus_rails
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require masonry.pkgd.min
//= require multipleFilterMasonry
//= require main
//= require hammer.min
//= require jquery.animate-enhanced.min
//= require jquery.countTo
//= require jquery.easing.1.3
//= require jquery.fitvids
//= require jquery.magnific-popup.min
//= require jquery.parallax-1.1.3
//= require jquery.properload
//= require jquery.shuffle.modernizr.min
//= require jquery.sudoSlider.min
//= require jquery.superslides.min
//= require rotaterator
//= require smoothscrolljs
//= require waypoints.min
//= require wow.min
//= require underscore
//= require gmaps/google
//= require markerclusterer
//= require infobox
//= require chosen-jquery
//= require cocoon
//= require imagesloaded.pkgd.min
//= require isotope.pkgd.min
//= require jquery.counterup.min
//= require jquery.pjax
//= require custom.js
// require slider
//= require bootstrap-slider
//= require_tree .

I have also tried moving bootstrap-slider to the last position after tree .

App/assets/javascripts/slider.js

jQuery(document).ready(function() {
    $("#ex8").slider({
    tooltip: 'always'
});

app/views/projects/_trl.html.erb

 <input id="ex8" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>

Can anyone show me where to find guidance on how to get this working. I can't understand why it's so easy for everyone else and so complicated for me.

The console doesnt show any errors with the js.

score 0 · Answer 1 · edited Aug 31 '16 at 03:15

0

Use:

//= require slider

And update slider.js:

jQuery(document).ready(function() {
  $("#ex8").slider({
    tooltip: 'always'
  });
});

edited Aug 31 '16 at 03:15

Gleb Kemarsky

10,160
7
43
68

answered Aug 31 '16 at 01:54

gebonadio

1
1

I have tried that too. It doesnt change anything. I don't have a file called slider.js in my vendor assets – Mel Aug 31 '16 at 01:55
You forgot to write an ```});``` in the end of slider.js file. – gebonadio Aug 31 '16 at 02:11

score 0 · Answer 2 · edited May 23 '17 at 12:22

0

On the basis of Using bootstrap-slider with jQuery UI advice, I changed the slider.js file to:

jQuery(document).ready(function() {
    $("#ex8").bootstrapSlider({
    tooltip: 'always'
    });
});

edited May 23 '17 at 12:22

Community

1
1

answered Aug 31 '16 at 02:09

Mel

2,481
26
113
273

score 0 · Answer 3 · answered Jul 29 '17 at 12:30

If you're using Turbolinks, use:

<script type="text/javascript">
  $(document).on('turbolinks:load',function(){

    // With JQuery
    $("#slider").slider();
    $("#slider").on("slide", function(slideEvt) {
      $("#sliderSliderVal").text(slideEvt.value);
    });

  });
</script>

Rails 4 - bootstrap slider

3 Answers3