multitouch event element identify

34 Views Asked by At

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.enter image description here

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?

0

There are 0 best solutions below