samedi 19 juin 2021

Input range in filter is not working on mobile

In the mobile version of the site the input range does not work in the filters if you click on it.Everything works fine on a laptop. In the mobile version of the site the input range does not work in the filters if you click on it.Everything works fine on a laptop.

https://svitlanavorobets.github.io/toster/catalog.html

Javascript:

setTimeout(init2slider('id66', 'id66b', 'id661', 'id662', 'id66i1', 'id66i2'), 0);

function init2slider(idX, btwX, btn1X, btn2X, input1, input2) {
    var slider = document.getElementById(idX);
    var between = document.getElementById(btwX);
    var button1 = document.getElementById(btn1X);
    var button2 = document.getElementById(btn2X);
    var inpt1 = document.getElementById(input1);
    var inpt2 = document.getElementById(input2);
    const firstInputValue = document.getElementById('id66i1')
    const secondInputValue = document.getElementById('id66i2')
    if (!inpt1) return
    var min = inpt1.min;
    var max = inpt1.max;

 
    var sliderCoords = getCoords(slider);
    button1.style.marginLeft = '0px';
    button2.style.marginLeft = (slider.offsetWidth - button1.offsetWidth) + 'px';
    between.style.width = (slider.offsetWidth - button1.offsetWidth) + 'px';
    if (!input1.value && input2.value) return
    inpt1.value = min;
    inpt2.value = max;


    inpt1.onchange = function (evt) {
        if (parseInt(inpt1.value) < min)
            inpt1.value = min;
        if (parseInt(inpt1.value) > max)
            inpt1.value = max;
        if (parseInt(inpt1.value) > parseInt(inpt2.value)) {
            var temp = inpt1.value;
            inpt1.value = inpt2.value;
            inpt2.value = temp;
        }


        var sliderCoords = getCoords(slider);
        var per1 = parseInt(inpt1.value - min) * 100 / (max - min);
        var per2 = parseInt(inpt2.value - min) * 100 / (max - min);
        var left1 = per1 * (slider.offsetWidth - button1.offsetWidth) / 100;
        var left2 = per2 * (slider.offsetWidth - button1.offsetWidth) / 100;

        button1.style.marginLeft = left1 + 'px';
        button2.style.marginLeft = left2 + 'px';

        if (left1 > left2) {
            between.style.width = (left1 - left2) + 'px';
            between.style.marginLeft = left2 + 'px';
        } else {
            between.style.width = (left2 - left1) + 'px';
            between.style.marginLeft = left1 + 'px';
        }
    }
    inpt2.onchange = function (evt) {
        if (parseInt(inpt2.value) < min)
            inpt2.value = min;
        if (parseInt(inpt2.value) > max)
            inpt2.value = max;
        if (parseInt(inpt1.value) > parseInt(inpt2.value)) {
            var temp = inpt1.value;
            inpt1.value = inpt2.value;
            inpt2.value = temp;
           
        }

        var sliderCoords = getCoords(slider);
        var per1 = parseInt(inpt1.value - min) * 100 / (max - min);
        var per2 = parseInt(inpt2.value - min) * 100 / (max - min);
        var left1 = per1 * (slider.offsetWidth - button1.offsetWidth) / 100;
        var left2 = per2 * (slider.offsetWidth - button1.offsetWidth) / 100;

        button1.style.marginLeft = left1 + 'px';
        button2.style.marginLeft = left2 + 'px';

        if (left1 > left2) {
            between.style.width = (left1 - left2) + 'px';
            between.style.marginLeft = left2 + 'px';
        } else {
            between.style.width = (left2 - left1) + 'px';
            between.style.marginLeft = left1 + 'px';
        }
    }

    /*mouse*/
    button1.onmousedown = function (evt) {
        var sliderCoords = getCoords(slider);
        var betweenCoords = getCoords(between);
        var buttonCoords1 = getCoords(button1);
        var buttonCoords2 = getCoords(button2);
        var shiftX2 = evt.pageX - buttonCoords2.left;
        var shiftX1 = evt.pageX - buttonCoords1.left;
       

        document.onmousemove = function (evt) { 
            var left1 = evt.pageX - shiftX1 - sliderCoords.left;
            var right1 = slider.offsetWidth - button1.offsetWidth;
            if (left1 < 0) left1 = 0;
            if (left1 > right1) left1 = right1;
            button1.style.marginLeft = left1 + 'px';


            shiftX2 = evt.pageX - buttonCoords2.left;
            var left2 = evt.pageX - shiftX2 - sliderCoords.left;
            var right2 = slider.offsetWidth - button2.offsetWidth;
            if (left2 < 0) left2 = 0;
            if (left2 > right2) left2 = right2;

            var per_min = 0;
            var per_max = 0;
            if (left1 > left2) {
                between.style.width = (left1 - left2) + 'px';
                between.style.marginLeft = left2 + 'px';

                per_min = left2 * 100 / (slider.offsetWidth - button1.offsetWidth);
                per_max = left1 * 100 / (slider.offsetWidth - button1.offsetWidth);
            } else {
                between.style.width = (left2 - left1) + 'px';
                between.style.marginLeft = left1 + 'px';

                per_min = left1 * 100 / (slider.offsetWidth - button1.offsetWidth);
                per_max = left2 * 100 / (slider.offsetWidth - button1.offsetWidth);
            }
            inpt1.value = (parseInt(min) + Math.round((max - min) * per_min / 100));
            inpt2.value = (parseInt(min) + Math.round((max - min) * per_max / 100));
           

        };
        document.onmouseup = function () {
            showInputRange(firstInputValue.value, secondInputValue.value)
            document.onmousemove = document.onmouseup = null;
        };
        return false;
    };

   

    button2.onmousedown = function (evt) {

        var sliderCoords = getCoords(slider);
        var betweenCoords = getCoords(between);
        var buttonCoords1 = getCoords(button1);
        var buttonCoords2 = getCoords(button2);
        var shiftX2 = evt.pageX - buttonCoords2.left;
        var shiftX1 = evt.pageX - buttonCoords1.left;

        document.onmousemove = function (evt) {
            var left2 = evt.pageX - shiftX2 - sliderCoords.left;
            var right2 = slider.offsetWidth - button2.offsetWidth;
            if (left2 < 0) left2 = 0;
            if (left2 > right2) left2 = right2;
            button2.style.marginLeft = left2 + 'px';


            shiftX1 = evt.pageX - buttonCoords1.left;
            var left1 = evt.pageX - shiftX1 - sliderCoords.left;
            var right1 = slider.offsetWidth - button1.offsetWidth;
            if (left1 < 0) left1 = 0;
            if (left1 > right1) left1 = right1;

            var per_min = 0;
            var per_max = 0;

            if (left1 > left2) {
                between.style.width = (left1 - left2) + 'px';
                between.style.marginLeft = left2 + 'px';
                per_min = left2 * 100 / (slider.offsetWidth - button1.offsetWidth);
                per_max = left1 * 100 / (slider.offsetWidth - button1.offsetWidth);
            } else {
                between.style.width = (left2 - left1) + 'px';
                between.style.marginLeft = left1 + 'px';
                per_min = left1 * 100 / (slider.offsetWidth - button1.offsetWidth);
                per_max = left2 * 100 / (slider.offsetWidth - button1.offsetWidth);
            }
            inpt1.value = (parseInt(min) + Math.round((max - min) * per_min / 100));
            inpt2.value = (parseInt(min) + Math.round((max - min) * per_max / 100));
           


        };
        document.onmouseup = function () {
           
            showInputRange(firstInputValue.value, secondInputValue.value)
            document.onmousemove = document.onmouseup = null;
        };
        return false;
    };

    button1.ondragstart = function () {
        return false;
    };
    button2.ondragstart = function () {
        return false;
    };

    function getCoords(elem) {
        var box = elem.getBoundingClientRect();
        return {
            top: box.top + pageYOffset,
            left: box.left + pageXOffset
        };
    }
   
}

I don't know why it doesn't work. Can anyone help please?




Aucun commentaire:

Enregistrer un commentaire