Bootstrap Slider如何将标签放置在刻度之间？

我懂你想要的效果——把标签放在相邻两个刻度的中间位置，而不是默认的每个刻度正下方。bootstrap-slider默认会让ticks_labels和ticks一一对应摆放，不过咱们可以通过自定义CSS调整定位，再配合标签数量的微调，就能实现你要的效果。

调整后的完整实现代码 #

首先我们把标签数量改成和刻度间隔数匹配（5个刻度对应4个间隔），再用CSS把标签精准定位到两个刻度的中间：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/css/bootstrap-slider.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/bootstrap-slider.min.js"></script>

<style>
p {
  margin: 1em 2em !important;
}

/* 核心：把标签移到刻度中间 */
.slider-tick-label-container .tick-label {
  position: relative;
  /* 让标签自身居中，避免偏移后文字错位 */
  transform: translateX(-50%);
  /* 每个间隔占总宽度的1/4，以此计算偏移量 */
  left: calc(100% / 4);
}

/* 第一个标签调整到0和1的中间 */
.slider-tick-label-container .tick-label:first-child {
  left: calc(100% / 8);
}

/* 最后一个标签调整到3和4的中间 */
.slider-tick-label-container .tick-label:last-child {
  left: calc(7 * 100% / 8);
}
</style>

<p>
  <input type="text" id="sastdastSlider" />
</p>

<script>
$(() => {
  $('#sastdastSlider').slider({
    id: 'sastdastSliderContainer',
    min: 0,
    max: 4,
    range: true,
    focus: true,
    ticks: [0, 1, 2, 3, 4],
    // 5个刻度对应4个间隔，所以用4个标签匹配区间
    ticks_labels: ['Info', 'Low', 'Medium', 'High'],
    lock_to_ticks: true,
  });
});
</script>

实现逻辑说明 #

1. 标签数量匹配：5个刻度（0-4）之间有4个连续区间，所以我们用4个标签对应这些区间（比如Info对应0-1，Low对应1-2），逻辑上更贴合范围滑块的展示需求。
2. CSS精准定位：
   • 用transform: translateX(-50%)让标签自身居中，避免偏移后文字出现错位。
   • 通过left属性计算偏移量：总宽度除以4得到单个间隔的宽度，第一个标签只需要偏移1/8宽度，最后一个偏移7/8宽度，正好落在相邻刻度的正中间。
3. 保留原有功能：滑块的range、lock_to_ticks等核心设置完全保留，不影响用户选择刻度的功能。

如果你坚持要保留5个标签（比如想把Critical放在最后一个刻度右侧），只需要调整最后一个标签的left值为calc(100% - 100%/8)，同时把ticks_labels改回原来的5个即可。

内容的提问来源于stack exchange，提问作者Sebas Pinto