linguist/samples/Marko/rgb-sliders.marko

static const colors = ['red', 'green', 'blue'];
static const defaultColor = [255, 0, 0];

class {
	onInput(input) {
		this.state = { color: input.color || defaultColor };
	}

	updateColor() {
    	this.state.color = colors.map((color) => {
        	return parseInt(this.getEl(color + 'Input').value, 10);
        });
    }

    getStyleColor() {
    	return 'rgb(' + this.state.color.join(',') + ')';
    }
}

<div.rgb-sliders>
    <div.inputs>
    	<for(i, color in colors)>
        	<div>
                <label for-key=color+"Input">
                    ${color}:
                </label>
                <input type="range" max="255"
                    key=color+"Input"
                    on-input('updateColor')
                    value=state.color[i] >
            </div>
        </for>
    </div>
    <div.color style={backgroundColor: component.getStyleColor()}>
    </div>
</div>