jQuery .slider() not working

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):

<div id="volume" style="touch-action: pan-y; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<ul class="indicators"></ul><ul class="indicators"></ul>
</div>

I'm initiating it with this code, it has worked before with the exact same code:

$("#volume").slider({
    min: 0,
    max: 100,
    value: 50,
    range: "min",
    animate: true,
    slide: function(event, ui) {
      setVolume(ui.value);
    }
});

It happened after I started using materializecss and socket.io on my webpage.

Anyone know how to fix this, and get it back to being operational again?

Solution

Found out MaterializeCSS also has a function called slider in their JavaScript. Had to remove that from their code, and the slider works as it was again.