如何在范围滑块的句柄之间添加文本

Question

我正在使用noUiSlider，但实际上任何范围滑块库都可以使用。 我有一个小部件（这里：https://codepen.io/chapkovski/pen/pobRwZj），人们必须将范围分成三个部分：

var slider = document.getElementById('slider-color');

noUiSlider.create(slider, {
  start: [6000, 12000],
  connect: [true, true, true],
  range: {
    'min': [2000],
    'max': [20000]
  }
});

var connect = slider.querySelectorAll('.noUi-connect');
var classes = ['c-1-color', 'c-2-color', 'c-3-color'];

for (var i = 0; i < connect.length; i++) {
  connect[i].classList.add(classes[i]);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.6.2/nouislider.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.6.2/nouislider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
  .c-1-color {
    background: red;
  }
  
  .c-2-color {
    background: yellow;
  }
  
  .c-3-color {
    background: green;
  }
</style>
<div id='slider-color'></div>

我想不通的是如何在范围内添加文本。例如，中档（黄色）类似于“第二类：XX%”（取决于手柄位置。当我做类似的事情时：

.c-3-color::after {
content:'my text goes here';
}

它最终完全变形了。

Answer 1

在父母身上，你有规模，所以这就是它不断增长的原因。您需要用孩子或伪孩子来补偿请看如下：

.c-3-color::after {
  content:'my text goes here';
  display: block;
  position: absolute;
  top: 50%;
  left: 33%;
  transform: translateY(-50%) scale(4,2);
}

DEMO（由于行更小，调整了上面的代码

var slider = document.getElementById('slider-color');

noUiSlider.create(slider, {
  start: [6000, 12000],
  connect: [true, true, true],
  range: {
    'min': [2000],
    'max': [20000]
  }
});

var connect = slider.querySelectorAll('.noUi-connect');
var classes = ['c-1-color', 'c-2-color', 'c-3-color'];

for (var i = 0; i < connect.length; i++) {
  connect[i].classList.add(classes[i]);
}

.c-3-color::after {
  content:'my text goes here';
  display: block;
  position: absolute;
  top: 50%;
  left: 33%;
  transform: translateY(-50%) scale(3,2);
  font-size:12px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.6.2/nouislider.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.6.2/nouislider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
  .c-1-color {
    background: red;
  }
  
  .c-2-color {
    background: yellow;
  }
  
  .c-3-color {
    background: green;
  }
</style>
<div id='slider-color'></div>