javascript - 在滑块引导的刻度之间放置标签

Question

我有一个带有刻度和范围的滑块，我使用bootstrap-slider 文档的一些示例，尤其是示例 12，但是，我不能在刻度之间放置标签。

这是我当前的代码，就像这样

$(() => {
  $('#sastdastSlider').slider({
    id: 'sastdastSliderContainer',
    min: 0,
    max: 4,
    range: true,
    focus: true,
    ticks: [0, 1, 2, 3, 4],
    ticks_labels: ['Info', 'Low', 'Medium', 'High', 'Critical'],
    lock_to_ticks: true,
  });
});

p { margin: 1em 2em !important; }

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

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

如您所见，标签位于每个刻度下方，我希望它们出现在两者之间，如下所示：

Answer 1

你可以使用 CSSmargin-left

.slider-tick-label:not(:first-child) {
    margin-left: -35px; /* px as required */
}