Bootstrap Range滑块：如何将拇指（圆圈）对准滑块轨道的左侧？

Question

我在使用Bootstrap的Angular 6项目中工作。

我要做什么：
用户应该能够指定预订人数。 此输入应使用范围滑块进行。 滑块应从0开始，最多可容纳30个人。

当前，我使用以下这一行HTML添加了范围滑块：

<h3>Value: {{personSliderValue}}</h3>
<input type="range" class="form-control-range" id="formControlRange" 
               value="0" min="0" max="30" #ref (change)="personSliderOnChange(ref.value)">

输出看起来像这样： Current Output Image

因为我指定了value =“ 0”属性，所以滑块的初始值为0（期望的行为）。
问题是拇指仍然位于滑块的中间（因为滑块的范围是0到30，它当前位于索引15上，而值是0）。 这是非常不自然的行为，会使用户感到困惑。 当我移动拇指时，值会正确显示。
我想在发生任何用户交互之前将拇指显示在最左侧（索引0）。

所需的输出： Desired Output Image

如何修改拇指的位置？

顺便说一句，是否有有关Bootstrap Range Sliders的详细文档？ 我能找到的就是这个（我认为这不是很详细）： Bootstrap Range，Range Inputs

提前谢谢！