html - Bootstrap Range Slider：如何对齐滑块轨道左侧的拇指（圆圈）？

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)">

输出如下所示： 当前输出图像

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

所需输出： 所需输出图像

如何修改拇指的位置？

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

先感谢您！

标签： htmlcssangulartwitter-bootstraprange