更改另一個滑塊時更新材質滑塊UI

Question

我的輸入有問題。 兩個輸入都已連接。 當您單擊第一個輸入時，第二個輸入將移動但css將不會更新。

 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"> 

編輯：我找到了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

為此，您需要通過Material庫而不是jQuery設置值，以便更新UI。 為此，請在DOM元素的MaterialSlider屬性上使用change函數，如下所示：

 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">