JSFiddle - React, Tailwind, and code Playground

by jarosciak

HTML

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#slider").on("input", function () {
    var value = this.value;
    $("#inputField").val(value);
  });

  $("#inputField").on("input", function () {
    var value = this.value;
    if (value > 10) {
      value = 10;
    }
    $("#slider").val(value);
  }); 
});
</script>
</head>
<body>

<p>Slide the ruler to select a number from 1 to 10:</p>

<input type="range" min="1" max="10" value="1" step="1" id="slider">

<input type="number" min="1" max="10" value="1" id="inputField">

</body>
</html>