JSFiddle - React, Tailwind, and code Playground

HTML

<div id="testing"></div>
<div class="display">rotate(0, 0)</div>
<p>a: <span id="a">0</span>

    <div id="a_slider"></div>
</p>

CSS

#testing {
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    margin-bottom: 100px;
    padding: 0px;
    height: 100px;
    width: 100px;
    background: red;
    background-image: url(http://screenshots.en.sftcdn.net/en/scrn/323000/323026/angry-birds-theme-02-100x100.png);
    border: 1px solid #000;
}
#a_slider, #b_slider, #c_slider, #d_slider, #e_slider, #f_slider {
    width: 80%;
}

JavaScript

var a = 0;
var b = 0;

$("#a_slider").slider({
    orientation: "horizontal",
    range: false,
    min: -360,
    max: 360,
    value: 0,
    step: 1,
    animate: true,
    slide: function (event, ui) {
        $("#a_field").val(ui.value);
        $("#a").text(ui.value);
        a = ui.value;
        compute();
    }
});


function compute() {
    $('.display').html('rotate(' + a + 'deg)');
    $('#testing').css('transform', 'rotate(' + a + 'deg)');
    $('#testing').css('-ms-transform', 'rotate(' + a + 'deg)');
    $('#testing').css('-webkit-transform', 'rotate(' + a + 'deg)');
}