Update Material slider UI when another slider is changed

Question

I'm in trouble with my inputs. Both of the inputs are connected. When you click on the first one, the second inputs will move but the css will not update.

 var $ra1 = $('#range1'); var $ra2 = $('#range2'); $ra1.on('input', function() { $ra2.val(this.max - this.value); }); $ra2.on('input', function() { $ra1.val(this.max - this.value); }); 

 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Range 1 <input type="range" min="0" max="400" value="0" class="mdl-slider mdl-js-slider " id="range1"> Range 2 <input type="range" min="0" max="400" value="400" class="mdl-slider mdl-js-slider" id="range2"> 

EDIT: I found a workaround for IE11

 var $ra1 = $('#range1'); var $ra2 = $('#range2'); if (navigator.appName == 'Microsoft Internet Explorer' || !!(navigator.userAgent.match(/Trident/) || navigator.userAgent.match(/rv:11/)) || (typeof $.browser !== "undefined" && $.browser.msie == 1)){ $ra1.change(function(){ $ra2.get(0).MaterialSlider.change(this.max - this.value); }); $ra2.change(function(){ $ra1.get(0).MaterialSlider.change(this.max - this.value); }); }else{ $ra1.on('input', function() { $ra2.get(0).MaterialSlider.change(this.max - this.value); }); $ra2.on('input', function() { $ra1.get(0).MaterialSlider.change(this.max - this.value); }); } 

 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Range 1 <input type="range" min="0" max="400" value="0" class="mdl-slider mdl-js-slider " id="range1"> Range 2 <input type="range" min="0" max="400" value="400" class="mdl-slider mdl-js-slider" id="range2"> 

Answer 1

For this to work you need to set the value through the Material library, not jQuery, in order for it to update the UI. To do that, use the change function on the MaterialSlider property of the DOM element, like this:

 var $ra1 = $('#range1'); var $ra2 = $('#range2'); $ra1.on('input', function() { $ra2.get(0).MaterialSlider.change(this.max - this.value); }); $ra2.on('input', function() { $ra1.get(0).MaterialSlider.change(this.max - this.value); }); 

 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Range 1 <input type="range" min="0" max="400" value="0" class="mdl-slider mdl-js-slider " id="range1"> Range 2 <input type="range" min="0" max="400" value="400" class="mdl-slider mdl-js-slider" id="range2">