JSFiddle - React, Tailwind, and code Playground

noUiSlider Demo

by skibulk

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.0.3/nouislider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.0.3/nouislider.min.js"></script>
<div id="slider" type="range" min="5" max="10" value="7" step="0.5" />

JavaScript

console.clear();

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

noUiSlider.create(slider, {
    start: parseFloat(slider.getAttribute("value")),
    range: {
        'min': parseFloat(slider.getAttribute("min")),
        'max': parseFloat(slider.getAttribute("max"))
    },
    step: parseFloat(slider.getAttribute("step")),
    tooltips: true,
    format: wNumb({
        decimals: 1
    }),
    pips: {
        mode: 'steps',
        stepped: true,
        density: 5
    },
});