JSFiddle - React, Tailwind, and code Playground

HTML

<div id="testing"></div>

<div class="display">matrix(1, 0, 0, 1, 0, 0)</div>

<p>a: <span id="a">1</span>
    <div id="a_slider"></div>
</p>
<p>b: <span id="b">0</span>
    <div id="b_slider"></div>
</p>
<p>c: <span id="c">0</span>
    <div id="c_slider"></div>
</p>
<p>d: <span id="d">1</span>
    <div id="d_slider"></div>
</p>
<p>e: <span id="e">0</span>
    <div id="e_slider"></div>
</p>
<p>f: <span id="f">0</span>
    <div id="f_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 = 1;
var b = 0;
var c = 0;
var d = 1;
var e = 0;
var f = 0;


$("#a_slider").slider({
    orientation: "horizontal",
    range: false,
    min: -3,
    max: 3,
    value: 1,
    step: .1,
    animate: true,
    slide: function (event, ui) {
        $("#a_field").val(ui.value);
        $("#a").text(ui.value);
		a = ui.value;
		compute();
    }
});
$("#b_slider").slider({
    orientation: "horizontal",
    range: false,
    min: -3,
    max: 3,
    value: 0,
    step: .1,
    animate: true,
    slide: function (event, ui) {
        $("#b_field").val(ui.value);
        $("#b").text(ui.value);
		b = ui.value;
		compute();
    }
});
$("#c_slider").slider({
    orientation: "horizontal",
    range: false,
    min: -3,
    max: 3,
    value: 0,
    step: .1,
    animate: true,
    slide: function (event, ui) {
        $("#c_field").val(ui.value);
        $("#c").text(ui.value);
		c = ui.value;
		compute();
    }
});
$("#d_slider").slider({
    orientation: "horizontal",
    range: false,
    min: -3,
    max: 3,
    value: 1,
    step: .1,
    animate: true,
    slide: function (event, ui) {
        $("#d_field").val(ui.value);
        $("#d").text(ui.value);
		d = ui.value;
		compute();
    }
});
$("#e_slider").slider({
    orientation: "horizontal",
    range: false,
    min: -300,
    max: 300,
    value: 0,
    step: 1,
    animate: true,
    slide: function (event, ui) {
        $("#e_field").val(ui.value);
        $("#e").text(ui.value);
		e = ui.value;
		compute();
    }
});
$("#f_slider").slider({
    orientation: "horizontal",
    range: false,
    min: -300,
    max: 300,
    value: 0,
    step: 1,
    animate: true,
    slide: function (event, ui) {
        $("#f_field").val(ui.value);
        $("#f").text(ui.value);
		f = ui.value;
		compute();
    }
});

function compute(){
	$('.display').html('matrix('+a+', '+b+', '+c+', '+d+', '+e+', '+f+')');	
    $('#testing').css('transform','matrix('+a+', '+b+', '+c+', '+d+', '+e+', '+f+')');
   ...