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="soft"></div>

CSS

#soft { margin: 50px }

JavaScript

$('#soft')[0].noUiSlider({
	start: [50, 70],
	range: {
		min: 0,
		max: 100
	}
});



$('#soft').on('set', function ( event, value ) {

    var v = [Math.max(20, value[0]), Math.min(80, value[1])];
    
    if ( v[0] != value[0] || v[1] != value[1] ) {
        $(this).val(v);
    }
});