Question

我一直在开发一个特定的网站，用户可以使用2个单独的范围滑块和一些简单的JavaScript数学工具来计算潜在的货币增长。使用Iphone或Ipad时，范围滑块在Safari中无法正常工作。

我研究了各种“ patchkit”类型的修复程序，其中增加了滑块的.css甚至添加了一些JavaScript。似乎没有任何工作。我很好奇，看看你们是否可以提出解决方案。

这对我来说是最后的努力，然后才使用jqueryslider或noUIslider或类似的东西重写计算器，我真的很想保留它的基本html CSS和javascript。

您可以在此处https://pillious.dk/beregning/签出有问题的页面但我会尽力在这里链接任何重要的东西：

HTML：

<div class="slidecontainer">
  <input type="range" min="25000" max="5000000" value="25000" step="25000" class="slider" id="IndskudRange">
</div>

CSS：

.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #002f60;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #002f60;
  cursor: pointer;
}

我认为一切正常，就像大多数浏览器和设备上一样。但是，在Iphone或Ipad上的Safari似乎会拖动范围滑块的手柄“或拇指”引起一些问题。用户似乎并没有瞄准滑块，而是似乎掌握了整个窗口，然后向右滑动将执行一些safari功能，使您返回上一级？

非常感谢您尝试提供帮助，如果我能找到更多信息来帮助创建解决方案，我将很乐意这样做。

使用Safari的iPhone / iPad上的HTML5范围滑块是否有修复程序？

0 个答案: