Bootstrap 4 两个项目之间的范围滑块百分比

Question

我找遍了，但找不到答案。我想使用 Bootstrap 4.5 的范围滑块来拆分客户和公司之间的百分比差异，范围为 1% - 100%。无法找出 jquery/javascript 来让它工作。谢谢

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

请看下面的附件。如果您有任何问题，请在评论中告诉我。

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>

Bootstrap 4 两个项目之间的范围滑块百分比

Bootstrap 4 range slider percentage between two items

javascript

jquery

range

percentage

bootstrap-4