JSFiddle - React, Tailwind, and code Playground

HTML

<html ng-app="todoApp">  
<h2>Todo</h2>
    <div ng-controller="TodoController">
        <input ng-change="change()" type="range" min="1" max="100" step="1" id="mensualite_slider" ng-model="gils" size="4" />
        <input ng-change="change()" type="text" name="mensualite" id="mensualite" ng-model="gils" size="4" /> 
        <br />
       <input ng-change="change()" type="range" min="1" max="100" step="1" id="mensualite_slider_2" ng-model="gils_2" size="4" />
        <input ng-change="change()" type="text" name="mensualite_2" id="mensualite_2" ng-model="gils_2" size="4" /> 
        <br />
       <input ng-change="compense()" type="range" min="10" max="200" step="1" id="mensualite_slider_3" ng-model="gils_3" size="4" />
        <input ng-change="compense()" type="text" name="mensualite_3" id="mensualite_3" ng-model="gils_3" size="4" /> 
        <br />
    </div>
        
 </html>

JavaScript

angular.module('todoApp', [])
  .controller('TodoController', ['$scope', function($scope) {
      
    $scope.gils = 10,
    $scope.gils_2 = 10;
    $scope.gils_3 = 20;
      
       $scope.change = function() {
        $scope.gils_3 = $scope.gils*1 + $scope.gils_2*1;
      };
       $scope.compense = function() {
        $scope.gils = $scope.gils_3*1 - $scope.gils_2*1;
      };      
  }]);