JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.0.2/nouislider.min.js"></script>
<link rel="stylesheet" href="//refreshless.com/noUiSlider/distribute/nouislider.min.css">
<div id="slider"></div>

<span id="val"></span>

CSS

body {
    padding: 30px;
}
#val {
    display: block;
    padding-top: 50px;
}

JavaScript

var range = {
 'min': 0,
  '10%': 10,
  '20%': 30,
  '30%': 60,
  '40%': 120,
  '50%': 180,
  '60%': 200,
  '70%': 250,
  '80%': 1000,
  '90%': 1200,
  'max': 1900
};

var testSlider = document.getElementById('slider');
var spanValue = document.getElementById('val');
    
noUiSlider.create(testSlider, {
    range: range,
    start: 0,
    snap: true,
    pips: {
      mode: 'steps',
      density: 10
    }
});

testSlider.noUiSlider.on('update', function( values, handle ){
 		spanValue.innerHTML = "Selected value: " + values[handle];
});