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" value="90"></a></li>
    <li><a href="#" onclick="return false;" class="test" id="2" value="30"></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 = 500;  // Maybe hardcode this value in setTimeout
var orig_message = "Click Here";  // 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 () {
                $('.slid').remove();  
 if ($this.attr("class") === "apa"){
alert($this.attr("class"));
}

                var val = document.getElementById(ids).getAttribute('value');
                $('<div class="slid" id="' + ids + '_slider" style="height:200px;"></div>').insertAfter('#menu');
                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: val,
                    step: 5,
                    slide: function( event, ui ) {
                        $('#'+ids).html(ui.value);
                    },
                    change: function(event, ui){
console.log(ui.value);
                        $('#'+ids).attr('value', ui.value);
                        $('#'+ids+'_slider').remove();                     
                    }       
                });               
            }, mousepress_time));
        }).on("mouseup", function () {
            clearTimeout($(this).data("checkdown"));                      
        }).on("mouseout", function () {
            clearTimeout($(this).data("checkdown"));
        }).on("click", function () {
           ...