JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css">
<div class="demo">
    <p>
        <label for="amount">Volume:</label>
        <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
    </p>
    
    <div class="slide"></div>
</div>

CSS

div.demo { padding: 10px 10px 10px 50px; }
div.demo p { display: block; margin-bottom: 10px; }
.ui-slider-vertical { height: 200px; width: 300px; border-radius: 100px; overflow: hidden; }
.ui-slider .ui-slider-handle { width: 100%; left: 0; }

JavaScript

$(function() {
    $( ".slide" ).slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: 60,
        slide: function( event, ui ) {
            $( "#amount" ).val( ui.value );
        }
    });
    $( "#amount" ).val( $( ".slide" ).slider( "value" ) );
});