Question

我在angularJS应用程序中有两个滑块，底面为0，ceil为100.两个值都从50开始

我希望他们以相反的方式移动，因此两个滑块的总和值应为100

例如，如果第一个滑块移动到60，则第二个滑块将返回到40

我的HTML代码：

 <table class="table">
        <tr>
            <td><label>first slider
            </label>
                   <rzslider rz-slider-model="priceSlider3"
                rz-slider-floor="0"
                rz-slider-ceil="100"
                rz-slider-always-show-bar="true"
                ></rzslider>
            </td>
        </tr>
        <tr>
            <td><label>second slider
            </label>
                   <rzslider rz-slider-model="100 - priceSlider3"
                rz-slider-floor="0"
                rz-slider-ceil="100"
                rz-slider-always-show-bar="true"
                ></rzslider>
                </td>
        </tr>
</table>

控制器内部：

$scope.priceSlider3 = 50;

我使用的解决方案是将第二个滑块数据模型设置为100 - priceSlider3

但是，如果第二个滑块发生变化，则第一个滑块发生变化，它仅适用于第一个滑块更改。

任何适合两者的解决方案？

Answer 1

您可以尝试为每个滑块设置不同的模型并观察其中的更改

// first slider value
$scope.priceSlider3 = 50;

// second slider value
$scope.priceSlider4 = 50;

$scope.$watch('priceSlider3', function(val) {
    $scope.priceSlider4 = 100 - val;
});

$scope.$watch('priceSlider4', function(val) {
    $scope.priceSlider3 = 100 - val;
});

然后，绑定新模型

<table class="table">
        <tr>
            <td><label>first slider
            </label>
                   <rzslider rz-slider-model="priceSlider3"
                rz-slider-floor="0"
                rz-slider-ceil="100"
                rz-slider-always-show-bar="true"
                ></rzslider>
            </td>
        </tr>
        <tr>
            <td><label>second slider
            </label>
                   <rzslider rz-slider-model="priceSlider4"
                rz-slider-floor="0"
                rz-slider-ceil="100"
                rz-slider-always-show-bar="true"
                ></rzslider>
                </td>
        </tr>
</table>

Answer 2

Angular 2中使用材料的相同功能：

组件模板：slider.compoment.html

<mat-slider [(ngModel)]="sliderOne" 
            [ngModelOptions]="{standalone: true}" 
            (change)="changeValueSliderOne($event.value)">
</mat-slider>
<input type="number" [(ngModel)]="sliderOne" />

<mat-slider [(ngModel)]="sliderTwo" 
            [ngModelOptions]="{standalone: true}" 
            (change)="changeValueSliderTwo($event.value)">
</mat-slider>
<input type="number" [(ngModel)]="sliderTwo"/>

组件打字稿：slider.component.ts

export class SliderComponent {
    sliderOne: number;
    sliderTwo: number;

    // ... 

    public changeValueSliderOne(value) {
        this.sliderOne = value;
        this.sliderTwo = 100 - value;
    }

    public changeValueSliderTwo(value) {
        this.sliderTwo = value;
        this.sliderOne = 100 - value;
    }
}

如何让两个滑块以相反的方式移动[AngularJS]

2 个答案: