I want to add a value bubble in my slider but no tutorials helped me do it myself since I'm new to HTML and CSS.
I prefer the position of the value to be just above the invisible thumb, and move it along with the thumb. But if such a moving bubble is too much work, I can also adjust with a static bubble on the left side of the slider.
I also want to be able to control the color of the value text and bubble.
Following is my slider;
<div class = "container">
<input type="range"
min="0"
max="25"
step="any"
value="%VOLM"
id="volm">
</div>
<style>
.container{
display:flex;
width:100%;
padding-top:2;
height: fit-content;}
#volm{
position: relative;
margin-top: 5px;
width:153px;
border-radius: 3px;
height: 5px;
-webkit-appearance: none;}
input::-webkit-slider-runnable-track {
-webkit-appearance: none;
background: linear-gradient(to right,#D4C81C, #FF0000);
position: relative;
box-sizing: border-box;
width: 100%;
height: 5px;
border-radius: 3px;
overflow: hidden;}
input::-webkit-slider-thumb {
position: relative;
left: initial;
bottom: 10px;
-webkit-appearance: none;
width: 0px;
height: 20px;
box-shadow: 330px 0 0 330px #DEDEDE, inset 0 0 0 40px #DEDEDE;
margin-top: 5px;}
</style>You can achieve that with some Javascript. For example:
const
range = document.getElementById('range'),
rangeV = document.getElementById('rangeV'),
setValue = () => {
const
newValue = Number((range.value - range.min) * 100 / (range.max - range.min)),
newPosition = 10 - (newValue * 0.2);
rangeV.innerHTML = `<span>${range.value}</span>`;
rangeV.style.left = `calc(${newValue}% + (${newPosition}px))`;
};
document.addEventListener("DOMContentLoaded", setValue);
range.addEventListener('input', setValue);
rangeV.style.display = "none";
function mouseDown() {
rangeV.style.display = "block";
}
function mouseUp() {
rangeV.style.display = "none";
}
range.addEventListener('mousedown', mouseDown);
range.addEventListener('mouseup', mouseUp);body {
min-height: 100vh;
padding: 0 10vh;
margin: 0;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
input[type=range] {
-webkit-appearance: none;
margin: 20px 0;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
.range-wrap {
width: 500px;
position: relative;
}
.range-value {
position: absolute;
top: -50%;
}
.range-value span {
width: 30px;
height: 24px;
line-height: 24px;
text-align: center;
background: #000;
color: #fff;
font-size: 12px;
display: block;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
border-radius: 6px;
}
.container {
display: flex;
width: 100%;
padding-top: 2;
height: fit-content;
}
#volm {
position: relative;
margin-top: 5px;
width: 153px;
border-radius: 3px;
height: 5px;
-webkit-appearance: none;
}
input::-webkit-slider-runnable-track {
-webkit-appearance: none;
background: linear-gradient(to right, #D4C81C, #FF0000);
position: relative;
box-sizing: border-box;
width: 100%;
height: 5px;
border-radius: 3px;
overflow: hidden;
}
input::-webkit-slider-thumb {
position: relative;
left: initial;
bottom: 10px;
-webkit-appearance: none;
width: 0px;
height: 20px;
box-shadow: 330px 0 0 330px #DEDEDE, inset 0 0 0 40px #DEDEDE;
margin-top: 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Input Range with Dynamic Label</title>
</head>
<body>
<div class="range-wrap">
<div class="container">
<div class="range-value" id="rangeV"></div>
<input id="range" type="range" min="0" max="25" step="any" value="%VOLM" id="volm">
</div>
</div>
</body>
</html>