Variable binding does not work

[copark86]

I was testing the following example code but found that the variable binding is not working.

When I run the code, "Stepped Range" starts with 8 instead of 64 and the log message in the call-back always prints 64 regardless of the slider value. Do you see any problem with the code?

	var container_gui = document.getElementById("gui-container");
	container_gui.style.display = "none";
	// Create the GUI
	var gui2 = new guify({
		theme: 'dark', // dark, light, yorha, or theme object
		align: 'right', // left, right
		width: 300,
		barMode: 'none', // none, overlay, above, offset
		panelMode: 'inner',
		opacity: 0.95,
		root: container_gui,
		open: false
	});

	var steppedNumber = 64;
	gui2.Register({
		type: 'range',
		label: 'Stepped Range',
		min: 8, max: 64, step: 8,
		object: this, property: "steppedNumber",
		onChange: (data) => {
			console.log(steppedNumber);
		}
	});

Edit 1:
I have track the problem and found the opts.object is undefined in the following code.

guify/src/gui.js

Line 190 in beae4ec

if(opts.object && opts.property) {

"object: this" was not defined as the code was in a module.

'<script type="module" src="./build/abovecode.js"></script>'

Is there a way to fix this without moving the code out of the module? It should be a module due to "import".