为什么我的范围滑块在移动设备上不起作用？

Question

我的网页有问题。我正在尝试为地图上的图层做sidenav。它必须能够移动不同的图层（类似于photoshop一样），并使用滑块设置图层的不透明度。它可以在台式机上正常工作，但不能在触摸屏上工作。如果我注释掉使列表可排序的行，则滑块可在移动设备上使用，但是我需要它既能做到又能做到。

//makes html list of the current layers
function makeList()
{
    layersToArray();
    // Make a container element for the list
    var listContainer = document.createElement("div");
    // Add it to the page
    document.getElementById("layerStackSideNav").appendChild(listContainer);
    // Make the list
    var listElement = document.createElement("ul");
    listElement.setAttribute("id","sortable");
    // Add it to the page
    listContainer.appendChild(listElement);
    var numberOfListItems = layerNames.length;

    // Set up a loop that goes through the items in listItems one at a time
    for (var i = numberOfListItems-1; i > -1; i--)
    {
        // create an item for each one
        var listItem = document.createElement("li");
        // Add the item text
        listItem.innerHTML = layerNames[i];
        // Add listItem to the listElement
        listElement.appendChild(listItem);
        //Make opacity slider
        var sliderContainer = document.createElement("div");
        sliderContainer.setAttribute("class","sliderContainer");
        listItem.appendChild(sliderContainer);
        var opacitySlider = document.createElement("input");
        opacitySlider.setAttribute("id", layerNames[i]);
        opacitySlider.setAttribute("class", "slider");
        opacitySlider.setAttribute("type", "range");
        opacitySlider.setAttribute("min", "0");
        opacitySlider.setAttribute("max", "1");
        opacitySlider.setAttribute("step", "0.1");
        opacitySlider.setAttribute("value", "1");
        opacitySlider.setAttribute("oninput",
           "findLayerByName(\""+layerNames[i]+"\").setOpacity(this.value)");
        sliderContainer.appendChild(opacitySlider);
    }
}