Could someone help me to add a moving value bubble in my slider?-CodePudding

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>

CodePudding user response：

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 >
    <div >
      <div  id="rangeV"></div>
      <input id="range" type="range" min="0" max="25" step="any" value="%VOLM" id="volm">
    </div>
  </div>
</body>

</html>