JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://s17.postimage.org/ys1ts310r/contrast.png"></script>
<script src="http://s21.postimage.org/eo2rl2vir/brightness.png"></script>
<script src="http://s23.postimage.org/mljehi4o7/picture_Controls.png"></script>
            <div id="pictureControls"
           		 onclick=""
           		 title="Picture Controls"
           		 alt="Picture Controls">
           		 
           		 <table id="pictureControlsMenu">        
           			<tr>
           				<td>
           					<div id="contrast">&nbsp;</div>
           			
           					<div id="contrastSlider"
           		 				 title="Contrast Slider">&nbsp;
           		 			</div>
           		 	
           		 			<div id="contrastDisplay">0</div>
           		 		</td>
           		 	</tr>
           		 	<tr>
           		 		<td>
           		 			<div id="brightness">&nbsp;</div>
	           		 		<button id="decreaseBrightness"> - </button>
           		 			<span id="brightnessDisplay">0</span>
           		 			<button id="increaseBrightness"> + </button>
           		 		</td>
           			</tr>
           		 </table>
 
            </div>

CSS

div#pictureControls {
	background: transparent url("http://s23.postimage.org/mljehi4o7/picture_Controls.png") no-repeat top left;
	width: 24px;
	height: 24px;
	float: left;
	position: relative;
	
	padding-right: 5px;
}

table#pictureControlsMenu {
	width: 160px;
	height:auto;
	background: #FFFFFF;
	border-style: double;
	border-width: 1px;
	border-top-width: 0px;
	border-color: #AAAAAA;
	position:relative;
	top: 35px;
	z-index: 100;
	display: block;
}

div#contrast {
	background: transparent url("http://s17.postimage.org/ys1ts310r/contrast.png") no-repeat top left;
	width: 16px;
	height: 16px;
	float: left;
	padding-right: 5px;
	margin-left: 5px;
	margin-right: 8px;
	margin-top: 5px;
	margin-bottom: 5px;
}

div#contrastSlider {
	background: transparent no-repeat top left;
	height: 10px;
	width: 70px;
	float: left;
	padding-right: 5px;
	margin-top: 6px;
	margin-bottom:10px;
}

html body .ui-slider .ui-slider-handle {
	width: 10px;
	margin-left: -.3em;
}

div#contrastDisplay {
	margin-left: 10px;
	float: left;
}

div#brightness {
	background: transparent url("http://s21.postimage.org/eo2rl2vir/brightness.png") no-repeat top left;
	width: 16px;
	height: 16px;
	float: left;
	margin-left: 5px;
	margin-right: 10px;
	margin-top: 3px;
	margin-bottom: 10px;
}

span#brightnessDisplay {
	margin-left: 5px;
	margin-right: 5px;
}

JavaScript

$('#pictureControlsMenu').hide();

$('#contrastSlider').slider({ max: 125, min: -125, value: 0, slide: function(){
        	contrast = $('#contrastSlider').slider("value");
        	$('#contrastDisplay').html(contrast);
        	}
        });

        $('#pictureControls').click(function(event) {
        	$('#pictureControlsMenu').slideToggle(300);
        	event.stopPropagation();
        });
        $('#pictureControlsMenu').click(function(event){
            event.stopPropagation();
        });
        $('html').click(function() {
        	if($('#pictureControlsMenu').is(':visible')){
        		$('#pictureControlsMenu').slideToggle(300);
        	}
        });