JSFiddle - React, Tailwind, and code Playground

HTML

<html lang = "en">

<head>
 
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.min.js"></script>  
 </head>
   <body>
  <div id="slider-pips" style="top: 0px; right: 1px; margin: 10px 25px;"></div>
    </body>

</html>

JavaScript

var pipsSlider = document.getElementById('slider-pips');

                noUiSlider.create(pipsSlider, {
                    //connect: true,
                    range: {
                        min: 0,
                        max: 100
                    },
                    start: [50],
                  // start: [1100,1850],
                    pips: {mode: 'count', values: 5}
                });
                var pips = pipsSlider.querySelectorAll('.noUi-value');
                function clickOnPip() {
                    var value = Number(pipsSlider.getAttribute('data-value'));

                    pipsSlider.noUiSlider.set(value);
                }

                for (var i = 0; i < pips.length; i++) {

                    // For this example. Do this in CSS!
                    pips[i].style.cursor = 'pointer';
                    pips[i].addEventListener('click', clickOnPip);
                }