How do I get a type range to be filled out according to marking?

Asked

Viewed 66 times

0

I’ve seen this on many websites, but some using Javascript or box-shadow, only that neither of the two is functional for the project (is being done in Wordpress).

<!DOCTYPE html>
<html>
<head>


<div class="slidecontainer">
<html>
   <head>
      <title>HTML Font</title>
   </head>

   <body>
     

</head>
<body>
   
	<p>R$<span id="demo"></span>  </p> 
  <input type="range" step=100 min="300" max="5000" value="50" class="slider" id="myRange">
</div>

  

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.slidecontainer {
  width: 70%;
}

.slider {
  -webkit-appearance: none;
  width: 70%;
  height: 5px;
  border-radius: 5px;
  background: #feae98;
  outline: 20px;
  opacity: 0.7;
  -webkit-transition: .20s;
  transition: opacity .20s;
}

.slider:hover {
  opacity: 1;
}


input[type=range]::-moz-range-track {
		background-color: green;
		
	}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  background: #feee00;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background: none;
  cursor: pointer;
}
</style>
</head>
<body>



<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var sliderparcelas = document.getElementById("myparcelas");
var meses = document.getElementById("parcelas");
var conta = document.getElementById("sozinho");


slider.oninput = function() {
  output.innerHTML = this.value;
  conta.innerHTML = (this.value)/slider.value;
}
sliderparcelas.oninput = function() {
  meses.innerHTML = this.value;
  conta.innerHTML = (slider.value)/this.value;
}
</script>


</body>
</html>

imagem para ilustrar melhor o que desejo

range

1 answer

1


Use Javascript to apply a background linear-gradient with the percentage proportional to the range value.

On the line:

this.style.background = 'linear-gradient(to right, yellow 0%, yellow '+
perc +'%, #feae98 '+ perc +'%, #feae98 100%)';

Where has #feae98 is the standard color of the range, and the yellow is the fill color to the left of the scroll button.

View the code with a few comments for a better understanding:

I commented on the line conta.innerHTML = (this.value)/slider.value; for avoid error in the example below.

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var meses = document.getElementById("parcelas");
var conta = document.getElementById("sozinho");


slider.oninput = function() {
   output.innerHTML = this.value;
//   conta.innerHTML = (this.value)/slider.value;
   var rMin = this.min;
   var rMax = this.max;
   var rStep = this.step;
   var prop = (rMax-rMin)/rStep; // calcula o número de steps
   var perc = 100*((this.value-rMin)/rStep)/prop; // calcula o percentual proporcional
   
   // aplica o background
   this.style.background = 'linear-gradient(to right, yellow 0%, yellow '+ perc +'%, #feae98 '+ perc +'%, #feae98 100%)';
}
.slidecontainer {
  width: 70%;
}

.slider {
  -webkit-appearance: none;
  width: 70%;
  height: 5px;
  border-radius: 5px;
  background: #feae98;
  outline: 20px;
  opacity: 0.7;
  -webkit-transition: .20s;
  transition: opacity .20s;
}

.slider:hover {
  opacity: 1;
}


input[type=range]::-moz-range-track {
		background-color: green;
		
	}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  background: #feee00;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background: none;
  cursor: pointer;
}
<p>R$<span id="demo"></span>  </p> 
<input type="range" step="100" min="300" max="5000" value="50" class="slider" id="myRange">

Browser other questions tagged range

You are not signed in. Login or sign up in order to post.