JSFiddle - React, Tailwind, and code Playground

HTML

<input class="no" id="slider" type="range" min="0" max="200" value="100" />
<div id="range"></div>
<input class="no" id="slider" type="range" min="0" max="200" value="100" />
<div id="range2"></div>

CSS

#slider{
	width:200px;
	float: left;
	height::30px;
    background-color: #CCC;
	}

JavaScript

$(document).ready(function(){
	$( ".no" ).on('mousedown',function(){return false;});	
	$('#slider').click(function(e){
		var x = e.pageX - this.offsetLeft;
		var val=parseInt($('#slider').val())
		x>val?valx=val+=10:valx=val-=10
		$('#slider').val(valx)
		$('#range').text(valx)
    	$('#range2').text(valx)
		})
	
})