JSFiddle - React, Tailwind, and code Playground

by sqiudward

HTML

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

CSS

.noUi-horizontal .noUi-handle-upper .noUi-tooltip {
  top: -32px;
  bottom: initial;
}

JavaScript

function data ( element, key ) {
	return element.getAttribute('data-' + key);   
}

function createSlider ( slider ) {
    
        noUiSlider.create(slider, {
            start: [0, 50],
            connect: false,
            step: Number(data(slider, 'step')) || 1,
            range: {
                'min': 0,
                'max': 50
            },
            tooltips: true,
            connect: true,
            format: {
                to: function (value) {
                    return value + '';
                },
                from: function (value) {
                    return value.replace('', '');
                }
            }
        });
}

Array.prototype.forEach.call(document.querySelectorAll('.slider'), createSlider);