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

Changing a range sliders min/max attributes and redraw dynamically

本文关键字：属性 动态 范围      更新时间：2023-09-26

我想创建三个具有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>

因此，第一张幻灯片有一个固定的最小和最大

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

Slider3只能在slide2的值和slide1的值之间进行更改。

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

但是：不会发生的是滑块也被正确地重新绘制。只有当我去更改slide2和slide3的值时，这才有效。将幻灯片3设置为任意值，然后更改幻灯片2。如果你这样做，你会看到幻灯片3被正确地重新绘制，所以拇指会改变它相对于当前值和给定范围的位置。但改变幻灯片1并没有显示出这样的效果。只有当你开始更改幻灯片2/3…的值时，你才会看到变化

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

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

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

相关文章：