Materialize: noUiSlider not materializing

[ErraticFox]

Hello, I'm using noUiSlider with Materialize and it looks the same other than the inner bar only being teal. The handles and default bar look the same though. In my html it's just a container > row > col > noUiSlider. Inspect element also shows that there's nothing trying to overwrite the styles of noUiSlider. I also looked into materialize.css and there's nothing that I seen that would overwrite noUiSlider.

The noUiSlider js and css links in the html file are placed under the materialize js and css links. What am I doing wrong? If the div needs a wrapper or specific class, I didn't see it in the documentation and I also seen a jsfiddle using noUiSlider materialize and it also didn't have a specific materialize class or wrapped in a specific tag.

html

<div id="slider"></div>

js

var slider = document.getElementById('slider');

noUiSlider.create(slider, {
    start: [20, 80],
    connect: true,
    step: 1,
    range: {
        'min': 0,
        'max': 100
    },
    format: wNumb({
        decimals: 0
    })
})

[tomscholz]

Please read the documentation carefully! http://materializecss.com/forms.html#range

[ErraticFox]

I still need help, before posting this I worked on it for a hour and that's all I did was read that documentation. https://codepen.io/ErraticFox/pen/oWoZBQ is what I have and I used a older version of materialize with it and it worked perfectly fine, but using the current version it doesn't work.

I see. Literally don't know how I didn't see that. :(

[klombomb]

I am having the same issue, has anyone found a solution?

Edit:
I seem to have found the problem: As the docs do state, you need to get the special modifed version of nouislider from https://github.com/Dogfalo/materialize/tree/master/extras/noUiSlider

Putting this here since this is a top google search result.

[alexventuraio]

To do so it's pretty easy I just needed to override the following classes:

.noUi-connect {
  background: purple;
}
.noUi-horizontal .noUi-handle, .noUi-vertical .noUi-handle {
  background: purple;
}
.noUi-target.noUi-horizontal .noUi-tooltip {
  background-color: purple;
}

To get this:

Here it is my pen
I hope it could be useful for you!

[SoarynAC]

I'm having the same issue, and I'm using the materialize provided nouislider, but it looks default, and not materialize style

[alexventuraio]

@SoarynAC have you taken a look at my pen? It is working fine now even with the latest MaterializeCSS version 0.100.2.

[SoarynAC]

@AlexVentura I have, I'm using version 1.0.0-rc.2 with the same setup you have, inside my page, but it just show the normal noUiSlider.
I'll try switching to version 0.100.2

EDIT: It still shows normal, I am using the materialize slider in the extras folder.
EDIT 2: Okay, I imported the slider through the url in your pen instead of the one I downloaded and it's working, thanks for the help.

[alexventuraio]

@SoarynAC Great!

[nofearOnline]

it half work to me in version 1 the slider is materialized but the handlers stuck on the left side and does not turn to toll tip which means it does not work

[phoebebright]

I too spent a long time on this and finally found where I went wrong. noUiSlider DOES NOT take an input tag as the selection but a div. ie.

[KagiJPN]

Can noUiSlider tooltips always be displayed?

Do I need to modify CSS or JS?