JSFiddle - React, Tailwind, and code Playground

by Vadim

HTML

<div class="speen" style="animation-duration: 5s">+</div>
<br>
<input type="range" class="control" min="1" max="100" value="1" step="1">
<p class="inpVal"></p>

CSS

.speen {
  display: inline-block;
  font-size: 40px;
  animation-name: speen;
  animation-direction: forward;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes speen {
  0: { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

JavaScript

var range = document.querySelector('.control')
var speen = document.querySelector('.speen')
var inpVal = document.querySelector('.inpVal')

range.addEventListener('input', function(){
	speen.style.animationDuration = 5 / Number(this.value) + 's'
  inpVal.textContent = this.value  
})