CODEWITHSUNDEEP
javascriptnouislider
cSmout
cSmout

Reputation: 63

noUiSlider get Id of slide event caller

I am having trouble with noUislider, in that I need to be able to differentiate between different sliders when slide events are triggered.

I thought (and from reading the noUiSlider GitHub) that I'd be able to use the 'this' reference, but it doesn't seem to work.

My code:

var mix_slider = document.getElementsByClassName('slider');

for (var i = 0; i < mix_slider.length; i++) 
{
noUiSlider.create(mix_slider[i], {
  start: [100],
  connect: "lower",
  orientation: "vertical",
  direction: "rtl",
  range: {
    'min': 0,
    'max': 127
  }
});

mix_slider[i].noUiSlider.on('slide', function(values, handle){
  var id = this.id; //<-- Needs to be the id of the slider that triggered the slide event 
  var part = id.slice(-2);
  var val = this.noUiSlider.get();//<-- This doesn't seem to work either
  document.getElementById('input_' + part).value = val;
});
};

I'm unsure what I'm doing wrong... I had (on the previous noUiSlider version) used jQuery's $(this).attr('id'); to grab the id, but this does not work either.

Any help would be greatly appreciated

Upvotes: 2

Views: 1229

Answers (1)

Lg102
Lg102

Reputation: 4898

The this in noUiSlider's events is the slider API. You can get the slider element in the API using this.target. (to get the element ID, use this.target.getAttribute('id'))

var val = this.noUiSlider.get(); //<-- This doesn't seem to work either

Since this is the API, you can do this.get().

Upvotes: 7

Related Questions