Change events

onChange gets a change event: the new and old value, the config that changed, and last, which is false while a slider moves. On a folder, it runs for each change of its children.

Setup, Tweakpane

import {UI} from 'uiconfig-tweakpane'
import 'uiconfig-tweakpane/theme.css'
import {Color, Vector2, Vector3, Vector4} from 'three'

// the panel goes into this element (without one, it floats at the top right)
const ui = new UI(document.getElementById('panel'))
ui.setTheme('light') // a mode of theme.css
ui.THREE = {Color, Vector2, Vector3, Vector4} // for the color and vector components

// this page prints the log under the panel
const log = console.log

Setup, Blueprint

import {UI} from 'uiconfig-blueprint'
import {Color, Vector2, Vector3, Vector4} from 'three'

// the panel goes into this element (without one, it floats at the top right)
const ui = new UI(document.getElementById('panel'))
ui.THREE = {Color, Vector2, Vector3, Vector4} // for the color and vector components

// this page prints the log under the panel
const log = console.log

on-change.js

const light = {intensity: 1, color: '#ffffff', castShadow: true}

ui.appendChild({
    type: 'folder',
    label: 'Light',
    expanded: true,
    children: [
        {
            type: 'slider',
            label: 'Intensity',
            bounds: [0, 10],
            stepSize: 0.1,
            property: [light, 'intensity'],
            // on the component: only its own changes
            onChange: (ev) => {
                if (ev.last) log('intensity is now', ev.value)
            },
        },
        {type: 'color', label: 'Color', property: [light, 'color']},
        {type: 'checkbox', label: 'Cast shadow', property: [light, 'castShadow']},
    ],
    // on the folder: every change of a child
    onChange: (ev) => {
        const path = ev.configPath.map((c) => c.label).join(' > ')
        log(`${path}: ${ev.lastValue} -> ${ev.value}, last: ${ev.last}`)
    },
})

Log