How to have two sliders move the opposite way [AngularJS]

Question

I have two sliders in angularJS application with a floor of 0 and ceil of 100. both values start at 50

I would like them to move the opposite way, so the total of both sliders value should be 100

for example if first slider moves to 60, the second would back up to 40

my HTML code:

 <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> 

inside controller:

$scope.priceSlider3 = 50;

The solution that I used is setting the second slider data model to 100 - priceSlider3

However if second slider changes, the first wont, it only works for the first slider changes.

Any solutions that would work for both ?

Answer 1

The same functionality in Angular 2 using materials:

Component template: 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"/>

Component typescript: 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;
    }
}

Answer 2

You could try having a different model for each slider and watch changes on them

// 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;
});

then, bind the new models

<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>