设置input type="range" range thumb的max属性后不要重绘。
更改最大值后是否有正确的方法来更新拇指位置？
我找到了以下方法：
<input type="range" min="0" max="100" value="50" />
var $i = $('input[type="range"]');
$i.attr('max', 200);
// hack to redraw thumb position
$i.val(0);$i.val(50);
【问题讨论】：
标签： javascript jquery html
我相信您可能偶然发现了基于 WebKit 的浏览器（或者至少是 Chrome）中的一个错误。
如果我们首先考虑到 WebKit will not dispatch the 'DOMAttrModified' event 的事实，因此回退到跨浏览器工作的 DOMSubtreeModified 事件，很容易看出在更新 max 属性时没有触发 DOM 事件铬/WebKit。这是一个小提琴：
在不同的浏览器（例如 IE11）中运行相同的示例，您会发现 DOMSubtreeModified 事件按预期触发（更重要的是，元素会按预期自动重绘）。
此外，您还可以发现更改其他属性的值，例如name，将导致DOMSubtreeModified 事件在WebKit/Chrome 中触发。如果您在分配新值之前完全删除 max 属性，您将从 WebKit/Chrome 获得两个 DOMSubtreeModified 事件；一个用于删除属性，一个用于分配新值。为了进一步搅浑水，即使DOMSubtreeModified 事件触发，元素仍然不会重绘（在 WebKit/Chrome 中）。所以这里似乎有几个错误：
max 属性值的更改。这似乎是一个问题，因为人们直觉地期望浏览器能够检测到这种变化，并在任何会影响其当前外观的状态发生变化时自动重绘元素。然而，有可能 HTML5 规范在这些方面没有实际意义，或者 WebKit/Chrome 实际上遵循了对该规范的一些严格解释。在这种情况下，会有一大群学究来解释 WebKit/Chrome 令人困惑的行为实际上是“正确的”，并指责我建议浏览器应该做一个技术上不符合规范的直观事情。
无论如何，就这个问题的实际解决方案而言，我认为你现在被黑客所困。你得到的并不可怕，尽管你可以接受 PushOk 的建议，并在 jQuery 中添加一个 redraw() 函数。比如：
$.fn.redraw = function(){
$(this).each(function(){
if (this.value && ! isNaN(parseInt(this.value, 10))) {
this.value++;
this.value--;
}
});
};
$i.attr('max', 200);
// hack to redraw thumb position
$i.redraw();
...或者，如果您真的不喜欢每次更改某些内容时都必须记得打电话给redraw()，您可以跳过一些额外的环节，按照接受的答案here 中的讨论来设置一个将检测属性变化的事件监听器。这将允许您在事件侦听器中调用一个 redraw()，而不是在您修改 max 属性的每个位置调用一个。
【讨论】：
var $i = $('input[type="range"]');
$i.attr('max', 200);
$.fn.redraw = function(){
$(this).each(function(){
var redraw = this.offsetHeight;
});
};
// hack to redraw thumb position
$i.redraw();
【讨论】：