JSFiddle - React, Tailwind, and code Playground

by AsciiSmoke

HTML

<script type="text/javascript"></script>
<input type="button" id="button" value="click">
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect id="redrect" opacity="1" width="300" height="100" fill="red" y="10" />
  <rect id="greenrect" opacity="1" width="300" height="100" fill="green" y="60" />
</svg>
<input type="range" min="0" max="10" step="1" value="10" id="opacSlider" />
<input type="text" id="opacVal">

JavaScript

$('#button').click(function() {
  DoClick();
});

$('#opacSlider').change(function() {
  var newVal = $(this).val() / 10;
  $('rect:last').attr('opacity', newVal);
  $('#opacVal').val(newVal);
});

function DoClick() {
  var green = $('#greenrect');
  var red = $('#redrect');
  var gInd = $(green).index();
  if (gInd > 0) {
    $(red).before(green);
  } else {
    $(red).after(green);
  }

  var newVal = $('rect:first').attr('opacity') * 10;
  $('#opacSlider').val(newVal);
  $('#opacVal').val(newVal / 10);
}