Bootstrap 4 range slider percentage between two items

I’ve looked all over but couldn’t find the answer. I want to use Bootstrap 4.5’s range slider to split the % difference between Client and Company with a range from 1% – 100%. Can’t figure out the jquery/javascript to get it working. Thanks

    <div class="row">
        <div class="col-6">
            <p>XX% Client</p>
        </div>
        <div class="col-6 text-right">
            <p>XX% Company</p>
        </div>
    </div>
    <div class="form-group">
        <label for="formControlRange">Example Range input</label>
        <input type="range" class="form-control-range" id="formControlRange">
    </div>

Answer

Please have a look on the the below attached. If you got any questions let me know in the comments.

const range = document.getElementById('formControlRange');
const client = document.getElementById('client');
const company = document.getElementById('company');

range.addEventListener('change', (e) => {
  const clientValue = e.target.value;
  client.textContent = clientValue;
  
  const companyValue = 100 - Number(clientValue);
  company.textContent = companyValue;
});

 <div class="row">
        <div class="col-6">
            <p><span id="client"></span>% Client</p>
        </div>
        <div class="col-6 text-right">
          <p><span id="company"></span>% Company</p>
        </div>
    </div>
    <div class="form-group">
        <label for="formControlRange">Example Range input</label>
        <input type="range" class="form-control-range" id="formControlRange">
    </div>