3

I'm trying to make an app in Rails 4 using bootstrap-slider-rails gem.

I can't find an example of how to use it.

I have set it up by installing the gem and adding:

@import 'bootstrap-slider';

to my application.css.scss file, and

//= require_tree .
//= require bootstrap-slider

bootstrap slider is the last thing required in my application.js

In my view, I want to make a slider.

I've tried crudely pasting the text shown on http://www.eyecon.ro/bootstrap-slider/

$('.slider').slider()

although it does nothing except print the slider line as text.

How do you get this working?

By contrast, when I use examples from

http://seiyria.com/bootstrap-slider/

I can display a slider on the view. I don't think this uses the gem though.

Does anyone know how to get this working?

Mel
  • 2,481
  • 26
  • 113
  • 273

1 Answers1

0

Please, show your browser console. Verify if exists any errors and if your input text have class slider, like the following example:

Gemfile:

gem 'bootstrap-slider-rails'

application.css:

 *= require bootstrap-slider
 *= require_tree .
 *= require_self

application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap-slider

$(function() {
  $('.slider').slider();
});

test.html.erb:

<input type="text" class="slider" value="" data-slider-min="-20" data-slider-max="20" data-slider-step="1" data-slider-value="-14" data-slider-orientation="vertical" data-slider-selection="after"data-slider-tooltip="hide">

I did a test, this way works. Good luck

Edit: Verify if your slider() call is in ready like $(function() {

Adriano Godoy
  • 1,488
  • 1
  • 11
  • 21
  • The difference between my attempt and yours is that I use import rathe than require in my css tree. I have made a file in my assets/javascripts folder called slider and have included the js function in that. It does not work – Mel Mar 27 '16 at 00:08
  • Using on @import in scss works for me too. Your console don't show any errors? – Adriano Godoy Mar 27 '16 at 00:12
  • No errors. The only mention it gets in the console is: Started GET "/assets/bootstrap-slider.self-c657f96f6d1f33fcbca0bbbf2f5b12faec819a51afac97740f3078c64067891f.js?body=1" for ::1 at 2016-03-27 11:35:41 +1100 – Mel Mar 27 '16 at 00:38