JSFiddle - React, Tailwind, and code Playground

HTML

<div class="editSliderHolder" id="brightness">
    <label>Brightness</label>
    <div class="editSlider" data-minVal="-20" data-maxVal="20" data-editValue="curValB"></div>
</div>
<div class="editSliderHolder" id="contrast">
    <label>Contrast</label>
    <div class="editSlider" data-minVal="-40" data-maxVal="40" data-editValue="curValC"></div>
</div>

JavaScript

$(document).ready(function () {
    var div = $("div.editSlider");
    div.each(function () {
        $(this).slider({
            value: 0,
            min: $(this).data("minval"),
            max: $(this).data("maxval"),
            slide: function (event, ui) {
                //alert(min); // check if value set
                $(this).data("editvalue", ui.value);
                $(this).data("editvalue");
                $(this).find('.ui-slider-handle').text(Math.round(ui.value));
            },
            stop: function (event, ui) {
                $(this).data("editvalue", ui.value);
                /* Caman('#capEdit', function () { 
                    this.revert(); // restore canvas
                    this.contrast(curValC); // add contrast
                    this.brightness(curValB); // add brightness
                    this.render(); // render it
                });
                */
            }
        });
    });
});