JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/bootstrap-slider.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/css/bootstrap-slider.min.css">
<script src="https://cdn.jsdelivr.net/npm/hyperhtml@latest/min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hyperhtml-element@1.3.0/min.min.js"></script>
<div id="root">

</div>

JavaScript

var exampeAr = [{s:1}, {s: 2}, {s:3}]

const root = {
  data: {},
   render() {
     return hyperHTML(document.getElementById('root'))`
      <div>
      ${exampeAr.map(update)}
      </div>
    `
   }
}

    function update(item) {
      const div = hyperHTML(item)`<div data-init="true"><input data-slider-id=${'ex1Slider'+item.s} type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/></div>`;
      // setup slider once
      if (div.dataset.init) {
        delete div.dataset.init;
        $(div.querySelector('input')).slider({});
      }
      return div;
    }

root.render()
setInterval(() => root.render(), 1000);