Range Slider Input - html

Question

I'm having a bit of hard time trying to figure out how to work this.
First of all, I have a range input slider. The slider has 5 tiers of increments, but the thing is, under the slider's ball there's a label that says "0/5", "1/5", "2/5" etc. Is there a way to display the label the following: at default start should be "0" then "0-10", "10-25", "25-100", "100-500", and lastly "500+".
<input id="range_size_value" type="text" class="rangeSliderRate"
data-min="0.0" data-max="5.0" data-from="0"
data-step="1"
name="range_size_value">
<input hidden readonly name="size" id="hidden_input_value" type="text" value="0">
$('#range_size_value').on('input', function (e) {
let size_value = $(".irs-single");
let input_step_value = $(this).val();
let hidden_input_value = $('#hidden_input_value');
if (input_step_value === '0') {
size_value.attr('value', '0');
hidden_input_value.attr('value', '0');
}
if (input_step_value === '1') {
size_value.html('0-10');
hidden_input_value.attr('value', '0-10');
}
if (input_step_value === '2') {
size_value.html('10-25');
hidden_input_value.attr('value', '10-25');
}
if (input_step_value === '3') {
size_value.html('25-100');
hidden_input_value.attr('value', '25-100');
}
if (input_step_value === '4') {
size_value.html('100-500');
hidden_input_value.attr('value', '100-500');
}
if (input_step_value === '5') {
size_value.html('500+');
hidden_input_value.attr('value', '500+');
}
});
That is my code that I have. It sort of works, but not really. For example, when I hold the mouse button down and slide the bar to the right, you can see the label changes to "0-10", "10-25" etc., but as soon as I let go of the mouse button, it goes back to "1/5" etc.
Also, there's a class called "irs-single" which is a span that controls the label for display the value. I don't see this span element nowhere in my html code. I only see in the Google dev tools when I inspect the elements.
If there's a better way of doing this, please definitely point me at the right direction. I feel like there is a better way than what I coded. I feel that there's a lot of conditional "if" statements. But I would like to keep the styling of the slider. I think this is more of a logic situation.

Answer 1

So I'm going to break this down in steps because this method can be a little bit much.
First, a div will be created to contain the range slider and the indicator.
Next, the range slider will be made.
An event listener will be added to check when the value of the range slider changes. When that happens, the position as well as the innerHTML of the indicator box will change.
Rather than using dataset like in the example you provided, I'll simply be using the value attribute of the range slider. These will be whole numbers and correspond to an array, with each part of the range slider corresponding with an element in the array. This way we can get the values that will appear in the box without having to hard-code them.
var values = ["0-10","10-25","25-100","100-500","500+"];
// event listener
document.getElementById("mySlider").addEventListener("input",function(e){
var text = values[e.target.value];
document.querySelector(".indicator").style.left = Number((e.target.value*25)-(2*e.target.value)) + "%";
// The subtraction portion ensures that the indicator doesn't go off the screen. Feel free to change the 2 to any value that works for you.
document.querySelector(".indicator").innerHTML = text;
});
* {
margin: 0;
box-sizing: border-box;
}
.container {
background-color: #ccc;
width: 100%;
display: block;
position: relative;
}
input[type=range] {
width: 100%;
display: block;
}
.indicator {
font-family: Arial;
padding: 5px;
background-color: black;
color: white;
position: absolute;
left: 0;
border-radius: 5px;
}
<div class="container">
<input type="range" min="0" value="0" max="4" step="1" id="mySlider">
<div class="indicator">
0-10
</div>
</div>