Input range slider not working on iOS Safari when clicking on track

Question

I have a pretty straight-forward range input slider. It works pretty well on all browsers except on iOS Safari.

The main problem I have is when I click on the slider track, it doesn't move the slider. It merely highlights the slider. It works fine when dragging the thumb. Any ideas on how to fix this?

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

Answer 1

For those still looking for a javascript only fix like I did. I ended up just making a "polyfill" for this; it relies on the max attribute of the slider and determines the best step to force the input range on iOS. You can thank me later :)

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" />