JSFiddle - React, Tailwind, and code Playground

by ahmad Noor

HTML

<div ng-app>
     <h2>Relative sliders</h2>

    <br>
    <div ng-controller="SlidersCtrl">
        <div ng-repeat="slider in sliders">
            <input type="range" ng-model="slider.value" ng-Change="updateSliders()" min="0" max="100" step="1" style="width: 100px; display: inline-block; position: relative; top: 7px; left: 10px;" /><span style="margin-left: 10px">{{slider.value}}</span>

            <br>
        </div>
    </div>
</div>

JavaScript

function SlidersCtrl($scope) {


    $scope.sliders = [{
        value: 1
    }, {
        value: 1
    }, {
        value: 1
    }, {
        value: 1
    }];

    // calculating default value for sliders
    $scope.slidersDefaultValue = Math.trunc(100 / $scope.sliders.length);

    for (var i = 0; i < $scope.sliders.length; i++) {
        $scope.sliders[i].value = $scope.slidersDefaultValue;
    }


    // event handler for slider value change event
    $scope.updateSliders = function () {

        $scope.sumOfSliderValues = 0;
        for (var i = 0; i < $scope.sliders.length; i++) {
            $scope.sumOfSliderValues = $scope.sumOfSliderValues + parseInt($scope.sliders[i].value);
        }



        for (var j = 0; j < $scope.sliders.length; j++) {

            if ($scope.sliders[j].value != $scope.sumOfSliderValues) {
                $scope.sliders[j].value = Math.trunc(($scope.sliders[j].value / $scope.sumOfSliderValues)
                    .toFixed(4) * 100);
            }
        }

    };

}