JSFiddle - React, Tailwind, and code Playground

by SIGC GUADALTEL

HTML

<div class="top">
  <div class="testing"></div>
</div>

<p>a: <span id="a">0</span>
  <div id="a_slider"></div>
</p>

CSS

.top {
  margin: 0px;
  padding: 0px;
  height: 200px;
  width: 500px;
}

.testing {
  margin-left: auto;
  margin-right: auto;
  margin-top: 200px;
  margin-bottom: 200px;
  padding: 0px;
  height: 100px;
  width: 100px;
  background: red;
  border: 1px solid #000;
}

JavaScript

$("#a_slider").slider({
  orientation: "horizontal",
  range: false,
  min: 0,
  disabled: true,
  max: 1,
  value: 0,
  step: .01,
  animate: true,
  slide: function(event, ui) {

  }
});
var v = 0;
setInterval(() => {
  v += 0.1;
  $("#a_slider").slider("value", v);
}, 1000);