JSFiddle - React, Tailwind, and code Playground

by drs4

HTML

<script src="https://code.jquery.com/ui/1.8.23/jquery-ui.js"></script>
<div id="button-container">
    <div id="button">
        <div id="inner_triangle_button"></div>
    </div>

    <div id="slider_container">
        <div id="slider_container_triangle"></div>
        <div id="shadow_slider"></div>
    </div>
    
</div>

CSS

#button-container {
    margin-left: 50px;
}

#button{
    margin-left: 150px;
    border:solid 3px #AAAAAA;
    width:25px;
    height:25px;
    background: black;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

#inner_triangle_button {
    width: 0; 
    height: 0; border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 8px solid white;
    margin-top:17px;
    margin-left: 15px;
}

#slider_container {
    height: 30px;
    width: 250px;
    margin-top: 6px;
    background: #AAAAAA;
    border:solid 3px #AAAAAA;
    -moz-border-radius: 15px;
    border-radius: 15px;
    display: none;    
}

#slider_container_triangle { 
    width: 0; 
    height: 0; 
    margin-top:-10px;
    margin-left: 159px;
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent;
    border-bottom: 10px solid #AAAAAA;
}

#shadow_slider {
    z-index: 100;
}

JavaScript

$('#button').click(function() { 
    
    if ( !$('#slider_container').is(":visible") )
        $('#slider_container').fadeIn(100);
    else
        $('#slider_container').fadeOut(100);
});

$(function() {
	$('.shadow_slider').slider({
        min: 0,
        max: 255,
        change: updateColor,
        slide: updateColor
	});
});

function updateColor() {
    var color = $('#shadow_slider').slider("value")
    $('#button').css('background', '#'+color+'0000');
}