how to add text between handles in a range slider

Question

I am using noUiSlider , but in fact any range slider library would work. I have a small widget (here: https://codepen.io/chapkovski/pen/pobRwZj ) where people have to split the range into three sections:

 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>

What I can't figure is how to add a text within the ranges. For instance for the mid-range (yellow one) would be something like 'Second category: XX%' (depending on the handles position. When I do something like:

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

it ends up completely deformed.

Answer 1

On the parent you are having scale so this is why it is growing. You need to compensate that with child or pseudo child Please have a look as below:

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

DEMO (with adjustment of the code above because line is smaller

 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>