JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<div id="i1" type="number" value="100" min="5" max="100" step="1" ></div>

<div id="i2" type="number" value="100" min="5" max="100" step="1" ></div>

<div id="log"></div>

CSS

#i1, #i2 {
    display: block;
}

JavaScript

function onChangeFunction() {
    $("#log").append("Change event triggered from either input field.<br>");
}

$("#i1").jqxSlider({height: 24, width: 100, min: 5, max: 100, step: 1, showTicks: false, showButtons: false, mode: 'fixed', tooltip: true});

$("#i2").jqxSlider({height: 24, width: 100, min: 5, max: 100, step: 1, showTicks: false, showButtons: false, mode: 'fixed', tooltip: true});

$("#i1").on("change", onChangeFunction);
$("#i2").on("change", onChangeFunction);

$("#i1").val("42");
$("#i2").val("42");

$("#i1").jqxSlider({min: 5, max: 600});

$("#i2").jqxSlider({min: 5, max: 600});