JSFiddle - React, Tailwind, and code Playground

by kairavthakar2016

HTML

<div class="slider-container">
<input type="range" min="1" max="1000" value="50" class="slider" id="range"  data-value="0" style="
    position: relative;
">
<span id="show-count"></span>
</div>

CSS

.slider-container  {
  background: #e1de00;
  padding: 50px;
  position: relative;
}
.slider-container .slider {
  -webkit-appearance: none;
  overflow: hidden;
  width: 100%;
  height: 50px;
  border-radius: 30px;
  background: #b5b33c;
  background: linear-gradient(to right, #fff, #fff), #b5b33c;
  background-size: var(--background-size, 0%) 100%;
  background-repeat: no-repeat;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
}

.slider-container .slider:hover {
  opacity: 1;
}

.content .slider-container .slider::-webkit-slider-runnable-track {
  height: 50px;
  -webkit-appearance: none;
  color: #13bba4;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  background: #54565a url("https://i.imgur.com/OuvOpHG.png") 50% 50% no-repeat;
  margin-left: 0%;
}

.slider::-moz-range-thumb {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  background: #54565a url("https://i.imgur.com/OuvOpHG.png") 50% 50% no-repeat;
}

#range{position: relative;}

#show-count {
    color: #000;
    font-weight: bold;
    position: absolute;
    left: 100px;
    top: 50%;
    transform: translateY(-50%);
   
}

JavaScript

const input = document.querySelector("input");

function setBackgroundSize(input) {
  input.style.setProperty("--background-size", `${getBackgroundSize(input)}px`);
}

setBackgroundSize(input);

input.addEventListener("input", () => setBackgroundSize(input));

function getBackgroundSize(input) {
  const min = +input.min || 0;
  const max = +input.max || 100;
  const value = +input.value;

  const inputWidth = input.offsetWidth;
  //let size = (value - min) / (max - min) * 100;
	var increaseValue, newMax;
	if(inputWidth <= max)
  {
  	increaseValue = 15;
    newMax = max + 75;
  }
  else
  {
  	increaseValue = 25;
    newMax = max + 50;
  }
  let size = ((value * inputWidth) / newMax) + increaseValue;

  if (value > 170) {
   document.getElementById("show-count").style.visibility = "visible";
   document.getElementById("show-count").innerHTML= value + ' m2';
  } else {
    document.getElementById("show-count").style.visibility = "hidden";
  }

  return size;
}