JSFiddle - React, Tailwind, and code Playground

by Czechler

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<input id="test" type="range" min="0" max="20000" step="1" value="0">
<input type="number" id="number">

JavaScript

$("#test").on("input", function() {
	
  if($(this).val() <= 10000) {
  	console.log("lower range");
    $("#number").val($(this).val());
  }
  
  if($(this).val() > 10000 && $(this).val() <= 15000) {
		console.log("In range");
    $("#number").val(Math.round($(this).val() * 1.6666667));
  }
  
  if($(this).val() > 15000) {
  	console.log("out of range");
    $("#number").val(Math.round($(this).val() * 10));
  }
  
  

});

$("#number").on("input", function() {
console.log($(this).val());
	 if($(this).val() <= 10000) {
    $("#test").val($(this).val());
  }
  
  if($(this).val() > 10000 && $(this).val() <= 25000) {
  	console.log("in range", Math.round($(this).val() / 1.6666667));
    
    $("#test").val(Math.round($(this).val()/ .6666667));
  }
 if($(this).val() > 25000) {
     $("#test").val($(this).val()/10);
  }

 
});