I'm building a two input range buttons on mobile, that i want to be able to use simultaneously on touch.
Here is how it looks.
Now, my javascript looks like this and it works.
slajder.addEventListener('touchmove',(e)=>{
console.log(e.changedTouches[0].target.id)
if(e.changedTouches[0].target.id == 'slajder' ){
slajdercolor.style.top = getHeightVW(e.changedTouches[0].clientY) + 'vh';
let clY = e.changedTouches[0].clientY
sliderVH = 100 - getHeightVW(clY)
getNumberForSpeed(sliderVH)
}
if(e.changedTouches[1].target.id == 'slajder'){
slajdercolor.style.top = getHeightVW(e.changedTouches[1].clientY) + 'vh';
let clY = e.changedTouches[0].clientY
sliderVH = 100 - getHeightVW(clY)
getNumberForSpeed(sliderVH)
}
})
slajderTwo.addEventListener('touchmove',(e)=>{
if(e.changedTouches[0].target.id == 'slajderTwo'){
slajdercolor2.style.top = getHeightVW(e.changedTouches[0].clientY) + 'vh';
let clY = e.changedTouches[0].clientY
sliderVH = 100 - getHeightVW(clY)
getNumberForSpeed(sliderVH)
konzola2.innerText = '2s ' + e.changedTouches[0].clientY + "slajderTwo+0"
}
if(e.changedTouches[1].target.id == 'slajderTwo'){
slajdercolor2.style.top = getHeightVW(e.changedTouches[1].clientY) + 'vh';
let clY = e.changedTouches[0].clientY
sliderVH = 100 - getHeightVW(clY)
getNumberForSpeed(sliderVH)
}
})
But the problem is, the way it checks for which slider is touched is very bulky and performance consuming.
Is there a way to detect the clientY position ONLY for touched element (example would be e.target.touch.clientY) and NOT have to check a list of all the touches by using 'if' statements?