[image][1] [1]: https://i.stack.imgur.com/W7bNt.png
Right now it works like this:
1- when key's index 0 do this, 2- when key's index 1 do this, 3- when key's index 2 do this.
but I want to add min and max value for objectVal array that can fix (for stance key[min], n , key[max]) but nth values in between, like it can add new keys and values in slider dynamically instead of calling its indexs and adding new conditional operators.
const sliders = document.querySelectorAll(".allSliders");
let result = document.querySelector(".result");
let totalNumber = 0;
let values = [];
let sliderNums = [];
let objectVal = [
{
keys: [0, 500,1000],
values: [0.0045, 0.0044,0.0043]
},
{
keys: [0, 500,1000],
values: [0.0045, 0.0044,0.0043]
},
{
keys: [0, 500,1000],
values: [0.0045, 0.0044,0.0043]
},
];
sliders.forEach((sliderNumber, id) => {
sliderNumber.addEventListener("input", () => {
let action =
objectVal[id].keys[3] - objectVal[id].keys[3];
let maxLine = objectVal[id].keys[3] + action;
let getInformation = maxLine - action * 0.666;
sliderNumber.setAttribute("max", maxLine);
let currentRange = parseInt(sliderNumber.value);
sliderNums[id] = currentRange;
function line(value, currentVal, obj)
{
values[id] = currentVal * obj;
sliderNumber.nextElementSibling.querySelector(
".tooltiptext"
).textContent = `(${currentVal} * ${obj})`;
sliderNumber.nextElementSibling.querySelector(".dollar").textContent =
values[id].toFixed(2);
}
if (
currentRange > objectVal[id].keys[0] &&
currentRange <= objectVal[id].keys[3] )
{
line(values[id], currentRange, objectVal[id].values[0])
}
else if (
currentRange > objectVal[id].keys[3] &&
currentRange <= objectVal[id].keys[3]
) {
line(values[id], currentRange, objectVal[id].values[3])
}
else {
line(values[id], currentRange, objectVal[id].values[3])
}```