How to optimize multiple call to the JS of the plugin with different settings?

The first time was faced with such a task that one plugin, the page is used many times, with little difference between the settings. The question arose of how to optimize the code. Perhaps as something in a loop for a walk or something like that...

A specific example:
1. Took plugin nouislider
2. On one page call 5 different slider elements
3. Each slider'and a bunch of the same settings, but different input and the parameters min and max.
4. How to get rid of similar code? If possible with an example.

For example, this code 5 times you need to repeat to different inputs and with different start:
var keypressSlider = document.getElementById('keypress');
var input0 = document.getElementById('input-with-keypress-0');
var input1 = document.getElementById('input-with-keypress-1');
var inputs = [input0, input1];

noUiSlider.create(keypressSlider, {
 start: [20, 80],
 connect: true
 direction: 'rtl',
 tooltips: [true, wNumb({ decimals: 1 })],
 range: {
 'min': [0],
 '10%': [10, 10],
 '50%': [80, 50],
 '80%': 150,
 'max': 200
}
});

keypressSlider.noUiSlider.on('update', function( values, handle ) {
 inputs[handle].value = values[handle];
});


Thanks in advance :)
July 2nd 19 at 18:23
1 answer
July 2nd 19 at 18:25
Solution
Try this
// var keypressSlider = document.getElementById('keypress');
var keypressSlider = document.getElementsByClassName(keypress);
var input0 = document.getElementById('input-with-keypress-0');
var input1 = document.getElementById('input-with-keypress-1');
var inputs = [input0, input1];
var defCfg = {
 start: [20, 80],
 connect: true
 direction: 'rtl',
 tooltips: [true, wNumb({ decimals: 1 })],
 range: {
 'min': [0],
 '10%': [10, 10],
 '50%': [80, 50],
 '80%': 150,
 'max': 200
}
};

function __extends(a, b) {
 var c = {};
 for (var v in a) {
 c[v] = a[v];
}
 for (var v in b) {
 c[v] = b[v];
}
 return c;
}

for (var i = 0; i < keypressSlider.length; i++) {
 var data = JSON.parse(keypressSlider[i].dataset.cfg)
 params = __extends(defCfg, data);
 noUiSlider.create(keypressSlider[i], params);
}

keypressSlider.noUiSlider.on('update', function(values, handle) {
 inputs[handle].value = values[handle];
});

Each element can specify its parameters: data-cfg='{"key":"values"}'
Thank you. The idea caught :)

Only where I have an EventListener on each input....I hope all the "podcasts" will work. - Mustafa.Tromp56 commented on July 2nd 19 at 18:28

Find more questions by tags jQuery