JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.4.1/bootstrap-slider.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.4.1/css/bootstrap-slider.css">
<br><br>
<input type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="[0,100]" id="sl2" style="width:60%">

JavaScript

function commafy(val) {
		var toPresent = 0;
		if (val < 10) {
			toPresent = (val / 10) * 1;
		} else if (val <= 80) { 
			toPresent = 1+ (val - 10) / 70 * 20;
		} else {
			toPresent = 1+20 + (val - 80) / 20 * 500;
		};
		return toPresent;
	}
  
  			$("#sl2").slider({
				reversed : true,
				tooltip_split: true,
				formatter: function(value) {
					return parseFloat(commafy(value)).toFixed(2);
				},
			});