JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<input type="text" data-min="1" data-max="8" value="1">
<div class="slider"></div>

<input type="text" data-min="6" data-max="10" value="6">
<div class="slider"></div>

<input type="text" data-min="3" data-max="12" value="3">
<div class="slider"></div>

JavaScript

$(".slider").each(function() {

  var $el = $(this),
    $input = $el.prev('input');

  $el.slider({
    min: $input.data('min'),
    max: $input.data('max'),
    slide: function(event, ui) {
      $input.val(ui.value);
    }
  });

});