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 = calc(val, 0, 10, -100, 0);
  } 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);
  },
});

function calc(currentValue, min, max, scaleMin, scaleMax) {
  return scaleMin + currentValue * (scaleMax - scaleMin) / (max - min);
}