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">
    <div id="pictureControlsWrapper">
        <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>
</div>

CSS

#pictureControlsWrapper {
    display: none;
}
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;
}
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

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

$('#pictureControls').click(function (event) {
    $('#pictureControlsWrapper').slideToggle(300);
});