JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var tempo_slider = document.getElementById('slider');

noUiSlider.create(tempo_slider, {
  start: [120],
  step: 1, 
  connect: "lower",
  orientation: "horizontal",
  direction: "ltr",
  behaviour: 'drag',
  range: {
    'min': 40,
    'max': 295
  }
});
tempo_slider.noUiSlider.on("change",function(){
    var values = tempo_slider.noUiSlider.get();
    console.log("values "+values);
  });