javascript - 更改另一个滑块时更新材质滑块 UI
问题描述
我的输入有问题。两个输入均已连接。当您单击第一个时,第二个输入将移动但 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">
解决方案
为此,您需要通过 Material 库而不是 jQuery 设置值,以便它更新 UI。为此,请在 DOM 元素change
的属性上使用该函数,如下所示:MaterialSlider
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">
推荐阅读
- visual-studio-code - 在 Visual Studio 代码中创建局部变量调试电子应用程序
- java - 以字符串格式评估随机生成的数学方程并得到答案
- git - Windows10 git clone https://github.com/ktbyers/netmiko” 致命错误
- c# - 使用颜色矩阵更改与 Photoshop 相同的图像亮度
- kubernetes - Kubernetes on Kafka on Kubernetes,liveness probe 失败
- javascript - Dates and times are wrong in MongoDB
- c - 调用 localtime 函数后 *stamp 发生了什么?
- bash - 如何使用 Bash 根据不同的白天无限期地运行命令?
- mesos - 在 minidcos 上部署 apache spark 时,在“/sys/**”“没有用于挂载的子系统””处将“cgroup”挂载到 rootfs“/var/lib/docker/overlay2”
- c++ - QTimer::timeout 没有触发