title: Why Jquery Ui does not work on safari for iphone?
body: <p>I can't understand why this code works on pc and android but not on iphone / ipad.</p>
  <pre><code>    var search_type = [&lt;?php foreach($surveys as $sur) {
    echo &quot;'&quot; . $sur-&gt;id_flashpinion . &quot;', &quot;;
    end($surveys);
      if ($sur === key($surveys))
          echo &quot;'&quot; . $sur-&gt;id_flashpinion . &quot;'&quot;;
  }
  ?&gt;];
  for (var i = 0; i &lt; search_type.length; i++) {
    let ids = '#volume' + search_type[i];
    var vote = $(ids).data(&quot;voted&quot;);
    if(vote != '') {
      $(ids).slider({
          min: 0,
          max: 100,
          value: vote,
              range: &quot;min&quot;,
          slide: function(event, ui) {
              return false;
          }
          });
          var myVolume = vote;
          let volumeThreshold = [20, 40, 60, 80, 101]
          let volumeClasses = [&quot;v0&quot;, &quot;v1&quot;, &quot;v2&quot;, &quot;v3&quot;, &quot;v4&quot;]
          let classIndex = volumeThreshold.findIndex((threshold) =&gt; {return myVolume &lt; threshold});
          changeClassTo(volumeClasses[classIndex]);
  
        function changeClassTo(className) {
          $(ids).removeClass();
          $(ids).addClass(&quot;volume &quot; + className);
        }
    } else {
      $(ids).slider({
          min: 0,
          max: 100,
          value: 0,
          range: &quot;min&quot;,
          slide: function(event, ui) {
            changeSlider(ui.value);
          },
          stop: function(_, ui){
            var id_flashpinion = ids.replace(/[^0-9]/g,'');
            vote = ui.value;
            $.ajax({
               type: &quot;POST&quot;,
               url: '/slider/vote',
               data:{id_flashpinion:id_flashpinion, vote:vote}
          });
          $(ids).on(&quot;slide&quot;, function (event, ui) { return false; });
      }
        });
  
  
      function changeSlider(myVolume) {
        let volumeThreshold = [20, 40, 60, 80, 101]
        let volumeClasses = [&quot;v0&quot;, &quot;v1&quot;, &quot;v2&quot;, &quot;v3&quot;, &quot;v4&quot;]
        let classIndex = volumeThreshold.findIndex((threshold) =&gt; {return myVolume &lt; threshold});
        changeClassTo(volumeClasses[classIndex]);
      }
  
      function changeClassTo(className) {
        $(ids).removeClass();
        $(ids).addClass(&quot;volume &quot; + className);
      }
    }
  
  }
  </code></pre>
  <p>the complete code is here <a href="https://codepen.io/dnl_re/pen/ZJzvJg" rel="nofollow noreferrer">https://codepen.io/dnl_re/pen/ZJzvJg</a>
  I also added jquery ui touch punch but it still doesn't work.</p>
  <p>I did some tests and it seems that safari doesn't interpret the initial for well but I don't know what to change because I'm not very good at javascript</p>