JSFiddle - React, Tailwind, and code Playground

by simon kämpendahl

HTML

<ul id="menu">
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br />
    <li><a href="#" onclick="return false;" class="test" id="1"></a></li>
    <li><a href="#" onclick="return false;" class="test" id="2"></a></li>
</ul>

CSS

#menu {
    margin: 10px 0 0 10px;
    padding: 0;
    border: 0;
}

#menu li {
    float: left;
    list-style: none;
    margin: 0 2px;
}

#menu li > a {
    text-decoration: none;
    border: 1px solid #000;
    background-color: #ff0000;
    color: #fff;
    padding: 2px;
}

JavaScript

var mousepress_time = 1000;  // Maybe hardcode this value in setTimeout
var orig_message = "Click Here";  // Remove this line
var held_message = "Down";  // Remove this line

$(document).ready(function () {
    $(".test")
        .html(orig_message)  // Remove this line
        .on("mousedown", function (e) {
            console.log("#########mousedown");  // Remove this line
            var ids = this.id
            var $this = $(this);
            $(this).data("checkdown", setTimeout(function () {
               // alert(ids);
             $('.slid').remove();   
    $( "body" ).append('<div class="slid" id="' + ids + '_slider" style="height:200px;"></div>');
    e.preventDefault();
    $('#'+ids + '_slider').css( 'position', 'absolute' );
    $('#'+ids + '_slider').css( 'top', e.pageY-200 );
    $('#'+ids + '_slider').css( 'left', e.pageX-5 );
    $('#'+ids + '_slider').show();
                    $( '#'+ ids + '_slider').slider({
      orientation: "vertical",
      range: "min",
      min: 0,
      max: 100,
      value: 60,
        step: 5,
            slide: function( event, ui ) {
        $('#'+ids).html(ui.value);
      },
        change: function(event, ui){
            $('#'+ids+'_slider').remove();
            alert(ids + '_slider='+ ui.value);
        }       
    });
               // $( '#'+ ids + '_slider').show();
               // $( '#'+ ids + '_slider').refresh();
                             
                // Add your code to run
                $this.html(held_message);  // Remove this line
            }, mousepress_time));
        }).on("mouseup", function () {
            clearTimeout($(this).data("checkdown"));
            console.log("#######mouseup");  // Remove this line
            //$(this).html(orig_message);  // Remove this line
        }).on("mouseout", function () {
            clearTimeout($(this).data("checkdown"));
            console.log("#######mouseout");  // Remove this line
           // $(this).html(orig_message);  //...