JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">
<form>
    <div>
        <input type="text" class="sliderValue" data-index="0" value="10" />
        <input type="text" class="sliderValue" data-index="1" value="90" />
    </div>
    <br />
    <div id="slider"></div>
</form>

CSS

body {
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
}

JavaScript

var createSlider = function ($slider, values) {
    $slider.slider({
        min: 0,
        max: 100,
        step: 1,
        values: values,
        slide: function(event, ui) {
            for (var i = 0; i < ui.values.length; ++i) {
                $("input.sliderValue[data-index=" + i + "]").val(ui.values[i]);
            }
        }
    });        
};

$(document).ready(function() {
    var values = [10, 90],
        $slider = $("#slider");
    
    createSlider($slider, values);
    

    $("input.sliderValue").change(function() {
        var $this = $(this);
        $("#slider").slider("values", $this.data("index"), $this.val());
    });
    
    
    // destroy slider
    $slider.slider('destroy');
    
    
    // add new value (simplyfied of course)
    values = [10, 90, 30];
    
    // create new slider again with new values
    createSlider($slider, values);
    
    $("input.sliderValue").change(function() {
        var $this = $(this);
        $("#slider").slider("values", $this.data("index"), $this.val());
    });
});