JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<div class="range">
  <input type="range" id="champ1" name="taxes" min="0" max="100" value="0"/>
  <!--<div class="range-bar"></div>
  <div class="buttonRange"></div>-->
</div>

CSS

body {
  background:#e1d2a9;
}
.range {
  margin:20px auto;
  width:250px;
  height:21px;
  position:relative;
  display:flex;
}

input[type=range] {
  -webkit-appearance: none;
  margin-right:5px;
  width:152px;
  outline:none;
  background:none;
}

input[type=range]::-webkit-slider-runnable-track {
   width:152px;
    height:11px;
    background:url("https://terre-noire.fr/TN3/static/img/sprite_icons.png") no-repeat;
    background-position:-5px -428px;
    border:none;
    border-radius:3px;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 19px;
  width: 19px;
  background:url(https://terre-noire.fr/TN3/static/img/sprite_icons.png) no-repeat;
  background-position:-157px -424px;
  opacity:1;
  z-index:1;
  margin-top:-4px;
  cursor:pointer;
}

input[type=range]::-webkit-slider-thumb:hover {
  background-position:-176px -424px;
}

.output {
  display:block;
  width:40px !important;
  height:21px !important;
  background:#ccb88e;
  color:#492f1b;
  font-weight:bold;
  border:1px #000 solid;
  line-height:21px;
  text-align:right;
  margin-left:5px;
  z-index:0;
}

.outpout {
  content:attr('0');
}

JavaScript

jQuery(function($){ 
	$("#champ1").after('<input type="number" class="output" name="taxe" value="0"/>');
	$("#champ1").on('change', function(){
  	var valof = $(this).val();
		$('.output').val(valof);
	});
  $('.output').on('change', function() {
    var valof2 = $(this).val();
    $("#champ1").val(valof2);
  });
});