Question

我有一个非常直接的范围输入滑块。除iOS OS外，它在所有浏览器上运行良好。

我遇到的主要问题是当我点击滑块轨道时，它不会移动滑块。它只是突出显示滑块。拖动拇指时效果很好。关于如何解决这个问题的任何想法？

<div class="slider-wrap">
    <div id="subtractBtn"></div>
    <input type="range" class="slider">
    <div id="addBtn"></div>
</div>

Answer 1

对于那些 still 像我一样寻求 javascript 修复程序的人。我最终为此做了一个“ polyfill”。它依靠滑块的max属性，并确定在iOS上强制输入范围的最佳步骤。以后你可以谢谢我：）

var diagramSlider = document.querySelector(".diagram-bar");

function iosPolyfill(e) {
  var val = (e.pageX - diagramSlider.getBoundingClientRect().left) /
   (diagramSlider.getBoundingClientRect().right - diagramSlider.getBoundingClientRect().left),
  max = diagramSlider.getAttribute("max"),
  segment = 1 / (max - 1),
  segmentArr = [];

  max++;

  for (var i = 0; i < max; i++) {
    segmentArr.push(segment * i);
  }

  var segCopy = segmentArr.slice(),
  ind = segmentArr.sort((a, b) => Math.abs(val - a) - Math.abs(val - b) )[0];

  diagramSlider.value = segCopy.indexOf(ind) + 1;
}

if (!!navigator.platform.match(/iPhone|iPod|iPad/)) {
  diagramSlider.addEventListener("touchend", iosPolyfill, {passive: true});
}

<input type="range" max="6" min="1" value="1" name="diagram selector" class="diagram-bar" />

Answer 2

从http://touchpunch.furf.com/

添加jQuery UI触摸键

Answer 3

非常容易和简单的解决方案

将CSS属性-webkit-tap-highlight-color: transparent添加到元素或整个html页面的CSS中。当在移动设备上点击某个元素时，这将消除麻烦的突出显示效果。

Answer 4

Safari 5.1 +应该完全支持类型“ range”-因此很奇怪，它无法正常工作。您是否尝试添加最小/最大/步长值？尝试仅使用纯HTML属性而不使用任何可能会干扰的类的方法-尝试粘贴此代码并在Safari浏览器上运行

<input type="range" min="0" max="3.14" step="any">

它应该可以工作-如果可以，则可能与您的CSS有关，如果不尝试使用此处的纯HTML示例之一：

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range

Answer 5

Cameron Gilbert提出的解决方案的增强版本。此实现适用于最小值设置为负数且可选设置步长的滑块。

对于那些不使用打字稿的人，我将其留给您以转换为纯JavaScript。

if (!!navigator.platform.match(/iPhone|iPad|iPod/)) {
mySlider.addEventListener(
    "touchend",
    (touchEvent: TouchEvent) => {
        var element = touchEvent.srcElement as HTMLInputElement;
        if (element.min && element.max && touchEvent.changedTouches && touchEvent.changedTouches.length > 0) {
            const max = Number(element.max);
            const min = Number(element.min);
            let step = 1;
            if (element.step) {
                step = Number(element.step);
            }
            //Calculate the complete range of the slider.
            const range = max - min;

            const boundingClientRect = element.getBoundingClientRect();
            const touch = touchEvent.changedTouches[0];

            //Calculate the slider value
            const sliderValue = (touch.pageX - boundingClientRect.left) / (boundingClientRect.right - boundingClientRect.left) * range + min;

            //Find the closest valid slider value in respect of the step size
            for (let i = min; i < max; i += step) {
                if (i >= sliderValue) {
                    const previousValue = i - step;
                    const previousDifference = sliderValue - previousValue;
                    const currentDifference = i - sliderValue;
                    if (previousDifference > currentDifference) {
                        //The sliderValue is closer to the previous value than the current value.
                        element.value = previousValue.toString();
                    } else {
                        element.value = i.toString();
                    }

                    //Trigger the change event.
                    element.dispatchEvent(new Event("change"));
                    break;
                }
            }
        }
    },
    {
        passive: true
    }
);

}

Answer 6

尝试使用jQuery Mobile？解决方法令人讨厌，我非常确定无法使用标准HTML的本机接口。从其他线程看，你可以做一个精心设计的CSS / JS解决方案。

单击轨道时，输入范围滑块在iOS Safari上不起作用

6 个答案: