更改范围滑块的最小/最大属性并动态重绘答案

【问题标题】：Changing a range sliders min/max attributes and redraw dynamically更改范围滑块的最小/最大属性并动态重绘
【发布时间】：2014-11-10 06:46:46
【问题描述】：

我想用 HTML5 输入类型范围创建三个范围滑块。这些滑块将相互依赖，因此如果我更改其中一个的值，它可能会更改另一个的最小和/或最大属性。

假设我有这些数据：

$scope.test = {
        slide1 : {
            min : 0,
            max : 100,
            step : 1,
            value : 50
        },
        slide2 : {
            min : 0,
            step : 1,
            value : 0
        },
        slide3 : {
            step : 1,
            value : 0
        }
    }

这应该在视图上表示如下：

<div ng-controller="testCtrl">
    <input id="slide1" type="range" min={{test.slide1.min}} max={{test.slide1.max}} step={{test.slide1.step}} ng-model="test.slide1.value" value={{test.slide1.value}}>
    <input id="slide2" type="range" min={{test.slide2.min}} max={{test.slide1.value}} step={{test.slide2.step}} ng-model="test.slide2.value" value={{test.slide2.value}}>
    <input id="slide3" type="range" min={{test.slide2.value}} max={{test.slide1.value}} step={{test.slide3.step}} ng-model="test.slide3.value" value={{test.slide3.value}}>
</div>

所以第一张幻灯片有一个固定的最小值和最大值。

第二个有一个固定的最小值，但它的最大值取决于slider1的值。

Slider3 只能在 slide2 的值和 slide1 的值之间改变。

好吧，如果我更改滑块，所有属性都会更改并设置为正确的值。

但是：不会发生的是滑块也被正确重绘。这只适用于我去改变slide2和slide3的值。将 slide3 设置为任意值，然后更改 slide2。如果你这样做，你会看到 slide3 被正确重绘，因此拇指改变了它相对于当前值和给定范围的位置。但是更改 slide1 并没有显示出这样的效果。当您开始更改 slide2/3 的值时，您只会看到更改...

是否可以在运行时更改最小/最大属性时强制重绘范围输入元素？

这是一个例子：http://plnkr.co/edit/UWChUywSpy64uvNbCHE0?p=preview

【问题讨论】：

用你所做的更好地创建一个 jsfiddle/plunk。

标签： javascript angularjs input attributes angularjs-directive

【解决方案1】：

我通过将 dom 的那部分替换为具有所需值的新输入范围元素来处理此问题。您可以在https://userbob.com/threeSliders.jsp 上查看。底部两个滑块的最大值取决于顶部滑块上选择的值。

【讨论】：