JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<script src="https://d309knd7es5f10.cloudfront.net/createjs.min.js"></script>

<script src="http://zimjs.com/live/zim_9.2.0_doc.js"></script>

JavaScript

var scaling = "fit"; // this will resize to fit inside the screen dimensions
var width = 1024;
var height = 768;

// as of ZIM 5.5.0 you do not need to put zim before ZIM functions and classes
var frame = new Frame(scaling, width, height);
frame.on("ready", function() {
    zog("ready from ZIM Frame"); // logs in console (F12 - choose console)

    var stage = frame.stage;
    var stageW = frame.width;
    var stageH = frame.height;
    frame.outerColor = frame.grey;
    frame.color = frame.lighter;
	
  
  var indicator = new Indicator({
		backdropColor:frame.grey,
		backgroundColor:frame.light,
		foregroundColor:frame.pink,
		num:4,
		width:250,
		press:true
	}).pos(50, 650, stage);
	indicator.selectedIndex = 1;
	indicator.on("change", function() {
		radio.selectedIndex = indicator.selectedIndex;
		stage.update();
	});
})