title: jQuery .slider() not working
body: <p>I've been working with the jQuery .slider() on my webpage for a while now, but suddenly when I'm running it locally, the slider shows up like this when I initate it in the html, and nothing can be done with it (it looks like its at value 0, and you can't interract with it):</p>
  
  <pre><code>&lt;div id="volume" style="touch-action: pan-y; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"&gt;
  &lt;ul class="indicators"&gt;&lt;/ul&gt;&lt;ul class="indicators"&gt;&lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm initiating it with this code, it has worked before with the exact same code:</p>
  
  <pre><code>$("#volume").slider({
      min: 0,
      max: 100,
      value: 50,
      range: "min",
      animate: true,
      slide: function(event, ui) {
        setVolume(ui.value);
      }
  });
  </code></pre>
  
  <p>It happened after I started using materializecss and socket.io on my webpage.</p>
  
  <p>Anyone know how to fix this, and get it back to being operational again?</p>