JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="one"/>
<p id="mousepos"></p>

JavaScript

const input = document.getElementById("one");
const text = document.getElementById("mousepos");
const selectHandler = (evt) => {
	const starts = evt.target.selectionStart;
  const ends = evt.target.selectionEnd;
  const textSelected = evt.target.value.slice(starts, ends);
  text.innerHTML = starts + " - " + ends + " <br/> Text: "+ textSelected; 
}
input.addEventListener('click', selectHandler);
input.addEventListener('mousedown', selectHandler);
input.addEventListener('mouseup', selectHandler);