JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://yourjavascript.com/41881413263/caman-full-min.js"></script>
<canvas id="canvas"></canvas>
<p>
    <label for="amount">Volume:</label>
    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>

JavaScript

var cam = Caman("#canvas", "http://stylonica.com/wp-content/uploads/2014/02/Beauty-of-nature-random-4884759-1280-800.jpg");

        $("#slider-range").slider({
            range: "min",
            min: -100,
            max: 100,
            value: 0,
            slide: function (event, ui) {
                $("#amount").val(ui.value);
                
                //cam.brightness(ui.value).render();
                    
           
            }

        });
        $("#amount").val($("#slider-range").slider("value"));