JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div id="sliders"></div>

CSS

.slider-wrapper {
  display: flex;
  margin: 10px;
}

.slider {
  width: 100%;
  margin: 10px;
}

JavaScript

const sliderTemplate = `
<div class="slider-wrapper">
  <button data-step="-1">-</button>
  <div class="slider"></div>
  <button data-step="+1">+</button>
</div>`;

const sliderData = [
  { min:  0, max: 100, value: 34 },
  { min: 10, max:  20, value: 19 },
];

$('#sliders')
  .append(Array(sliderData.length).fill(sliderTemplate).join(''))
  .find('.slider')
  .each((i, n) => $(n).slider(sliderData[i]));

$('.slider-wrapper [data-step]').button().click(function() {
  const $slider = $(this).closest('.slider-wrapper').find('.ui-slider');
  const step = +this.dataset.step;
  const { min, max, value } = $slider.slider('option');

  $slider.slider('option', 'value', Math.max(min, Math.min(max, +value + step)));
});