JSFiddle - React, Tailwind, and code Playground

by draditya91

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,
        max: 1,
        value: 0,
        step: .01,
        animate: true,
        slide: function (event, ui) {
            $("#a_field").val(ui.value);
            $("#a").text(ui.value);
        }
    });