JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://refreshless.com/nouislider/source/distribute/jquery.nouislider.all.min.js"></script>
<link rel="stylesheet" href="http://refreshless.com/nouislider/source/distribute/jquery.nouislider.min.css">
<div id="slider"></div>

<input id="one">
<input id="two">

CSS

#slider {
    margin: 50px;
}

JavaScript

$.fn.setIf = function( value ){
  
    if ( value == '' || value < 0 || value > 100 ) {
         $(this).val('');
    } else {
         $(this).val(value);
    }
};

$("#slider").noUiSlider({
    range: {'min':-1,'max':101},
    start: [-1, 101],
    serialization: {
        to: [[$("#one"), 'setIf'], [$("#two"), 'setIf']]
    }
});
$("#slider").Link("lower").to($("#one"));
$("#one").change(function(){
    $("#slider").val($(this).val());
});

$("#two").change(function(){
    $("#slider").val([null, $(this).val()]);
});