JSFiddle - React, Tailwind, and code Playground

by Anderson Carlos Woss

HTML

<div class="axis">
  <div class="axis--circle" draggable="true">
    
  </div>
</div>

CSS

.axis {
  width: 500px;
  height: 2px;
  background-color: black;
  position: relative;
}

.axis--circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #27ae60;
  position: absolute;
  top: -8px;
  cursor: pointer;
}

JavaScript

document.querySelectorAll('.axis--circle').forEach(function (element) {
	element.addEventListener('drag', function (event) {
  	this.style.left = event.clientX % 500;
  });
});