JSFiddle - React, Tailwind, and code Playground

HTML

<input id="counter" type="range" min="0"  ></input>

CSS

#counter {
    -webkit-appearance: none;
    background-color: silver;
    width: 200px;
    height:10px;
    border-radius:50px;
	border-color:rgb(240, 61, 37);
}

#counter::-webkit-slider-thumb {
     -webkit-appearance: none;
    width:15px;
	height:15px;
	border-radius:50px;
	content:"1";
	background:rgb(240, 61, 37);
	opacity:0.95;
  animation-name: stretch;
	animation-duration: 1.0s; 
	animation-timing-function: ease-out; 
	animation-delay: 0;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-fill-mode: none;
	animation-play-state: running;
  
}


@keyframes stretch {
	  0% {
	    border:2px solid #4EC077;
	    border-radius: 100%;
	  }
	  100% {
	    border:4px solid #4EC077;
	   	border-radius: 100%; 
	  }
	}