JSFiddle - React, Tailwind, and code Playground

by mattopen

HTML

<script src="https://www.vermittlerportal.de/Appserver/b2c/UIFramework/Scripts/UI_Framework/UIFramework.min.js"></script>
<link rel="stylesheet" href="https://www.vermittlerportal.de/Appserver/b2c/UIFramework/Styles/UI_Framework/UIFramework.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
<div id="slider">
  <div id="custom-handle" class="ui-slider-handle"></div>
</div>

CSS

#custom-handle {
    width: 3em;
    height: 1.6em;
    top: 50%;
    margin-top: -.8em;
    text-align: center;
    line-height: 1.6em;
    }
    #slider{
      margin-top:100px;
      padding:20px;
    }

JavaScript

var handle = $( "#custom-handle" );
    $( "#slider" ).slider({
      create: function() {
        handle.text( $( this ).slider( "value" ) );
      },
      slide: function( event, ui ) {
        handle.text( ui.value );
      }
    });