I have two Bootstrap sliders, initialized and ready. I have attached change event to them, but I am unable to get which slider is changing, as change event gives me an object containing newValue and oldValue. I need to get the event.target to find the parent of the slider which is triggering the change event.
Here is the code that I have so far :
HTML FIXTURE
<div class="container-fluid">
<div class="slider-container">
<span id="slide-label">Example slider label</span>
<input class="slide" id="slide_1" type="text" />
</div>
</div>
<div class="container-fluid">
<div class="slider-container">
<span id="slide-label">Example slider label</span>
<input class="slide" id="slide_2" type="text" />
</div>
</div>
JS
let slide_arr = [
{
id: 'slide_1',
min: 1,
max: 4,
step: 1,
value: 1,
tooltip: "hide",
ticks: [1, 2, 3, 4],
ticks_labels: ["item a", "item b", "item c", "item d"]
},
{
id: 'slide_2',
min: 1,
max: 4,
step: 1,
value: 1,
tooltip: "hide",
ticks: [1, 2, 3, 4],
ticks_labels: ["item 1", "item 2", "item 3", "item 4"]
}];
let slider_instance = [];
for (let index = 0; index < slide_arr.length; index++) {
const slide_obj = slide_arr[index];
slider_instance[index] = new Slider(`#${slide_obj.id}`, slide_obj);
}
for (let index = 0; index < slider_instance.length; index++) {
const slider = slider_instance[index];
slider.on('slideStart', function (e) {
console.log('slideStart')
console.log(e);
});
slider.on('slideStop', function (e) {
console.log('slideStop')
console.log(e);
});
slider.on('change', function (e) {
console.log('change')
console.log(e);
});
slider.on('slide', function (e) {
console.log('slide')
console.log(e);
});
}
I have tried a lot of events and none are helping.
I have made this Fiddle to demonstrate the problem.
To get the target you're changing, you can use slider.$element
and slider.$sliderElem
in your case.
slider.on('change', function(e) {
// I think this is what you actually want (#slide_1 or #slide_2)
console.log(slider.$element)
console.log(slider.$sliderElem) // This is the horizontal slider
});
Here's a jsfiddle