CODEWITHSUNDEEP
javascripthtmlcssrangeslidernouislider
Philipp Chapkovski
Philipp Chapkovski

Reputation: 2069

how to add text between handles in a range slider

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.

Upvotes: 1

Views: 472

Answers (1)

MaxiGui
MaxiGui

Reputation: 6358

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>

Upvotes: 1

Related Questions