JSFiddle - React, Tailwind, and code Playground

HTML

<div class="inputWrap hidden">
    <input readonly class="mini inputNumber" readonly type="text" value="0.5">
    <div class="slider"></div>
</div>
    <div class="inputWrap hidden">
    <input class="mini inputNumber" type="text" value="5">
    <div class="slider"></div>
</div>

JavaScript

$(".slider").slider({
    min: 0,
    max: 5,
    step: 0.25,
    slide: function (event, ui) {
        $(this).parent().find(".inputNumber").val(ui.value);
    },
    create: function(event, ui){
        $(this).slider('value',$(this).parent().find(".inputNumber").val());
    }
});