4

I am trying to set the value of a mdl slider when a page loads. The recommended way of setting the value for a mdl slider is like this- 

document.querySelector('#slider').MaterialSlider.change(value);

This however throws an error TypeError: document.querySelector(...).MaterialSlider is undefined if called from $(document).ready() or $(window).load().

Setting a timeout of a second on it fixes the issue but seems hacky. Is there any other event I can tie it to to ensure it works?

This is how I am loading the scripsts -- 

    //mobile optimized
    meta(name='viewport', content='width=device-width, initial-scale=1.0')

    //css
    link(rel='stylesheet', href='/stylesheets/style.css')

    //material-design-lite
    link(rel='stylesheet', href='/bower_components/material-design-lite/material.min.css')
    script(src='/bower_components/material-design-lite/material.min.js')
    link(rel='stylesheet', href='https://fonts.googleapis.com/icon?family=Material+Icons')

    //jQuery
    script(src='/bower_components/jquery/dist/jquery.min.js')

    //Material icon fonts
    //link(rel="stylesheet", href="https://fonts.googleapis.com/icon?family=Material+Icons")
    link(href='https://fonts.googleapis.com/css?family=Open+Sans', rel='stylesheet', type='text/css')

    //polyfill (support for dialog)
    script(src="/bower_components/dialog-polyfill/dialog-polyfill.js")
    link(rel="stylesheet", type="text/css", href="/bower_components/dialog-polyfill/dialog-polyfill.css")
charsi
  • 2,917
  • 22
  • 40

3 Answers3

4

It took me a few months but I finally found a solution to this. Just needed to add this --

$( document ).ready(function() {
    componentHandler.upgradeAllRegistered();
    // --- do stuff on mdl elements here ---
});

This has the added advantage of hiding the ugly version of the mdl components before they are fully loaded.

charsi
  • 2,917
  • 22
  • 40
1

Based on your error message, I do agree with the question line that @e666 is going down. Some other things to check is where you are loading MDL relative to the other scripts. Script loading can get a bit tricky sometimes.

Besides that, something else you can consider is setting the value of the slider in the DOM directly if you are building your HTML pages out dynamically on the server.

For example, a slider's HTML looks like this:

<p style="width:300px">
  <input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2">
</p>

Note the value option. You could set that value dynamically with server side code if that is a possible alternative for you.

If you were working with ASP.NET, you may do something like this.

@model MyModel

<div>
  <p style="width:300px">
    <input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="@Model.InitialValue" step="2">
  </p>
</div>

But, if you are having issues with your JavaScript loading, I would recommend making sure everything is loading properly before going further as it will likely affect you later on.

JasCav
  • 34,458
  • 20
  • 113
  • 170
  • I have a value already set in the HTML but it needs to change depending on user's location. I have also tried changing the order the scripts load in. Doesn't make a difference. For now I have resorted to setting the value the non-standard way (calling.val() on the slider ) which leads to minor css issues but I haven't got it working any other way yet. – charsi Aug 18 '16 at 13:01
0

In which order are your slider and your javascript code? If you first call your function and then create the slider, the function won't find it. That might be the reason why it is undefined. That's also the reason why it works after a waiting time of one second. In this one second the page has been loaded completly and the slider can be found.

If you create the slider first and change it afterwards, you can manipulate it. You can do this with a code-block after the slider, where the function to change the sliders value is called.

cbickel
  • 56
  • 2