Materialize: HTML5 Range slider doesn't show thumb

[bigrig2212]

Expected Behavior

Current Behavior

Sample code for HTML5 Range slider doesn't show thumb. Everything else about it works. On drag, the slider slides, but nothing pops up above to show where you are in the slider. Woks fine on materializecss.com/range.html, but doesn't work locally (every other component that i've tested locally has worked so far).

Possible Solution

Steps to Reproduce (for bugs)

1. Install Materialize via css and js links
2. Copy and paste sample range code into an html doc

Context

Can't get the range slider thumb to show up.

Your Environment

Mac Chrome

[wittsparks]

I'm seeing the same behavior in Mac Firefox. Here's a fiddle of the issue.

[acburst]

Which Materialize version and what Browser version is it not working on?

I've tested on the latest versions and its working for me

[wittsparks]

The fiddle linked above is using 1.0.0-rc.2. I'm using the same version in my own code where I discovered the problem. I'm seeing the same behavior Firefox 61 and Chrome 67 on Mac.

Is there any JS initialization code required?

[bigrig2212]

I'm on Chrome 67.0.3396.99 (Official Build) (64-bit), 1.0.0-rc.2.
Here is a screen recording:
https://photos.app.goo.gl/zWxgPzZjZRfocWDg6

[candacej97]

I also see the thumb present in the Fiddle

[wittsparks]

I still don't see the slider in the fiddle, but I set up a test page, and it is working for me there.

UPDATE:
I discovered that my test page (linked above) works because the materialize.js <script> tag is included immediately before the closing body tag. If I move it to the document head, the thumb doesn't work anymore.

In my case I'm using VueJS, and even with the script tag at the end of the body, the thumb won't work from within a VueJS component. It does work if I add a range control to a page outside of a component. Still working on that one.

[the-real-junskihere]

having same issue with reactjs, no thumb showing on html5 range.

[FireLemons]

It would be nice to have a js function to initialize a range so it can have thumbs.

[FireLemons]

@wittsparks @bigrig2212 @the-real-junskihere This should work. It initializes ranges on the page.

var array_of_dom_elements = document.querySelectorAll("input[type=range]");
M.Range.init(array_of_dom_elements);

I think vue loads elements into the dom after materialize has a chance to call Range.init($('input[type=range]'));
toward the bottom of the js file.

[wittsparks]

Great, thanks @FireLemons, that worked.

For other Vue users who find this...

I put the above code in the mounted() method of my component, inside a Vue.nextTick() callback:

  mounted() {
      Vue.nextTick(function () {
        var array_of_dom_elements = document.querySelectorAll("input[type=range]");
        M.Range.init(array_of_dom_elements);
      });
  }

[lautaroml]

Same problem here!

Browser: Safari Versión 12.0 (14606.1.36.1.9)

Materialize: 1.0.0

@FireLemons its a temp fix!

[pjebs]

They should put a note in the documentation for this issue.

[mldoscar]

@wittsparks @bigrig2212 @the-real-junskihere This should work. It initializes ranges on the page.

var array_of_dom_elements = document.querySelectorAll("input[type=range]");
M.Range.init(array_of_dom_elements);

I think vue loads elements into the dom after materialize has a chance to call Range.init($('input[type=range]'));
toward the bottom of the js file.

This solution worked for me, thanks

[Queatz]

Ran into the same issue using Angular.

Workaround:

M.Range.init($(this.element.querySelector('input[type=range]')));

[DavidPalomeque]

@wittsparks @bigrig2212 @the-real-junskihere This should work. It initializes ranges on the page.

var array_of_dom_elements = document.querySelectorAll("input[type=range]");
M.Range.init(array_of_dom_elements);

I think vue loads elements into the dom after materialize has a chance to call Range.init($('input[type=range]'));
toward the bottom of the js file.

This worked great , thanks !

[PrathameshTM]

Add defer at the end of thematerialize.min.js script tag and everything will start working

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js" **defer**></script>

Edit 1: There is no need for initialization