JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider"></div>
<span id="value">20.00</span>

<button data-range="20,50">Set range [20, 50]</button>
<button data-range="10,40">Set range [10, 40]</button>

CSS

#value {
    margin: 20px;
    display: block;
}

JavaScript

function log(){
    $('#value').text($(this).val());
}

var options = {
    range: [0, 40]
   ,start: 20
   ,handles: 1
   ,slide: log
   ,set: log
   ,margin: 2
   ,step: 2
}

// This is the key to updating the slider:
// extend your options, and set the slider back to
// the values it had. Using the 'true' flag in 'val'
// triggers the 'set' callback, so you can see how the
// value is automaticly truncated to the new range.
function updateSlider( slider, newOptions ){
    var settings = $.extend({}, options, newOptions),
        current = slider.val();
    return slider.empty().noUiSlider(settings).val(current, true);
}

// Initialize the slider with your options.
$('#slider').noUiSlider(options);

// When a button is clicked, we'll read the data-range attribute
// it has, and update the slider with the new value.
$('button').click(function(){
    updateSlider($('#slider'), {
        range: $(this).attr('data-range').split(',')
    });
});