JSFiddle - React, Tailwind, and code Playground

by Thiago Diniz

HTML

<fieldset class="range-volume">
  <label for="step-1" class="label">Range valor de 1k em 1k</label>
  
  <input value="0" min="0" step="1" max="10" type="range" id="step-1" class="range">
  
  <p class="text">Crescimento de Leads em até 5x</p>
  <p>Estimamos um investimento mensal de <span class="result">R$ <span class="result-value">0</span>.000,00</span></p>
  
</fieldset>

CSS

*{
  box-sizing:border-box;
  font-family:sans-serif;
}

.range-volume{
  margin: 20px;
  padding:15px;
  border:1px solid #cacaca
}

.label{
  margin-bottom:15px;
  display:block
}

.range{
  vertical-align:middle;
  display:inline-block
}

.text{
  margin:15px 0
}

.result{
  color:red
}

/*ESTILIZAÇÃO DO RANGE http://www.cssportal.com/style-input-range/ */

input[type=range] {
  height: 35px;
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background: #9C1E2A;
  border-radius: 0px;
  border: 0px solid #9C1E2A;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 3px 3px 5px #000031;
  border: 1px solid #9C1E2A;
  height: 25px;
  width: 25px;
  border-radius: 50px;
  background: #D51017;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #9C1E2A;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background: #9C1E2A;
  border-radius: 0px;
  border: 0px solid #9C1E2A;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 3px 3px 5px #000031;
  border: 1px solid #9C1E2A;
  height: 25px;
  width: 25px;
  border-radius: 50px;
  background: #D51017;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #9C1E2A;
  border: 0px solid #9C1E2A;
  border-radius: 0px;
  box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-fill-upper {
  background: #9C1E2A;
  border: 0px solid #9C1E2A;
  border-radius: 0px;
  box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-thumb {
 ...

JavaScript

$('.range').on('change', function(){
	$('.result-value').text($(this).val())
})