Question 44741 in Html Question posted in
Some basic documentation can be found here.

How do I make a slider in HTML that fill itself in behind with a gradient

I’m just playing around in HTML and I wanted to make a slider that fills itself in with a gradient, and I found this close to being impossible. I have been researching for hours and I can’t seem to find an answer.

I assume I need JS for this but I am completely blank there.

.slidecontainer {
  justify-content: center;
  bottom: 0px;
  margin-left: auto;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 5px;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.8;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 5px;
  width: 25px;
  height: 25px;
  background: blue;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: blue;
  cursor: pointer;
}
<div class="slidecontainer">
  <input type="range" min="1" max="100" value="1" class="slider" id="myRange">
</div>

I have tried exactly what I said above. I have been trying things from this website (https://codepen.io/kaiquenunes23/pen/LYEvegK) but I can’t put my finger around it.

I have also read multiple other threads on StackOverflow.

Tags:

2

Answers


  1. 0

    You need JS to get the current position of the thumb.

    This snippet does this by reading the positions on the slider and calculating the percentage it has been moved. It then sets a CSS variable –pc to that percentage value.

    The slider is given two background images, first is one that is transparent up to the thumb and then is the gray color you want. And ‘underneath it’ is the second background image which is whatever linear gradient you want.

    In this way the linear-gradient is revealed as you move the slider to the right.

    const slider = document.getElementById("myRange");
slider.addEventListener("input", update);

function update() {
  const pc = (slider.value - slider.min) / (slider.max - slider.min) * 100 + '%';
  slider.style.setProperty('--pc', pc);
}
    .slidecontainer {
  justify-content: center;
  bottom: 0px;
  margin-left: auto;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 5px;
  width: 100%;
  height: 25px;
  --pc: 0;
  background: linear-gradient(to right, transparent 0 var(--pc), #d3d3d3 var(--pc) 100%), linear-gradient(to right, red, green);
  outline: none;
  opacity: 0.8;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 5px;
  width: 25px;
  height: 25px;
  background: blue;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: blue;
  cursor: pointer;
}
    <div class="slidecontainer">
  <input type="range" min="1" max="100" value="1" class="slider" id="myRange">
</div>
    Login or Signup to reply.
  2. 0

    try this

    <div class="slidecontainer">
  <input type="range" min="1" max="100" value="1" class="slider" id="myRange">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search