I am currently utilizing the noUiSlider, although any range slider library should suffice.
I have a compact widget (see here: https://codepen.io/chapkovski/pen/pobRwZj) where users need to divide 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>The issue I am facing is how to include text within the ranges. For example, for the middle range (yellow), it should display something like 'Second category: XX%' (where XX% varies depending on the handles' positions). When I try the following:
.c-3-color::after {
content:'my text goes here';
}
the layout gets completely distorted.