Question

我想用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的值时，您将只看到更改...

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

以下是一个示例plunker：http://plnkr.co/edit/UWChUywSpy64uvNbCHE0?p=preview

Answer 1

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

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

1 个答案: