JSFiddle - React, Tailwind, and code Playground

HTML

<div id="number_slider"></div>
<div id="number_field"></div>

CSS

* { font-family: Helvetica, Arial, san-serif; }
body { padding: 20px; }
div { margin: 10px; }

JavaScript

function slideVal() {
    var number = $("#number_slider").slider("value");
    $("#number_field").append('Slide: ' + number + '<br/>');
}

function changeVal() {
    var number = $("#number_slider").slider("value");
    $("#number_field").append('Change: ' + number + '<br/>');
}

$(function() {
    $( "#number_slider" ).slider({
        min: 1,
        max: 10,
        change: changeVal,
        slide: slideVal
    });
    
    $( "#number_slider" ).slider( "value", 5 );
});