Initializing bootstrap-slider as node module doesn't work

help
1

Greetings fellow meteorites!
Trying to get BootstrapSlider working in a blaze meteor template. I’m currently importing from a node module but the events such as slide, change don’t work even though I am following the syntax the documentation gives.

import 'bootstrap-slider';
import 'bootstrap-slider/dist/css/bootstrap-slider.min.css';

Template.slider.onRendered(()=>{
  let currentSlider =  this.$('.slider').slider({
    min            : 0,
    max            : 100,
    step           : 1,
    value          : 5 ,
    tooltip        : 'show'
  })
  const something = ()=>{
    console.log(`YO!!!`)
  }
  currentSlider.slider().on('slide', something).data('slider');
   currentSlider.slider().on('change', function(changeEvt){
     console.log(`changeeee`)
   })
   console.log(`CURRENT SLIDER JQUERY OBJECT ? : ${currentSlider instanceof jQuery}`)
});

I’m just following the syntax I see here https://github.com/seiyria/bootstrap-slider/blob/master/tpl/index.tpl

But it’s not working. Anybody see what I’m doing wrong ?

Appreciate the help big time :slight_smile: Alex

2

It’s very strange but the issue was stemming from onRendered I had to change the line
let currentSlider = this.$('.slider').slider({
to…
let currentSlider = Template.instance().$('.slider').slider({

3

onRendered requires that you use the ES5 syntax,not ES2015 “fat arrow” syntax in order that the template context (this) is correctly set up.

Template.slider.onRendered(function() {

Although, as you discovered, Template.instance() can be used to get a reference to the context.

4

Ah that makes much more sense now! Overlooked this. Thank you.

1 Like
5

I can’t see how to make the slider reactive. In this instance you define it in the template with an input but then when you call .slider() in the template onRendered function the input is replaced with a tree of divs which overwrites any reactive data-slider-value or value attributes that you might have provided. Is there a way of making the slider reactive?