JSFiddle - React, Tailwind, and code Playground

by simon kämpendahl

HTML

<label for="amount">Volume:</label>
  <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">

 <div class="slid" id="slider-vertical" style="height:200px;"></div>

JavaScript

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