getValue and setValue

Functions instead of a field: getValue gives the value to show, setValue gets the edited value. Here the panel shows a temperature in Fahrenheit that is stored in Celsius.

Setup, Tweakpane

import {UI} from 'uiconfig-tweakpane'
import 'uiconfig-tweakpane/theme.css'

// 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

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

Setup, Blueprint

import {UI} from 'uiconfig-blueprint'

// the panel goes into this element (without one, it floats at the top right)
const ui = new UI(document.getElementById('panel'))

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

getter-setter.js

// the data is in Celsius; the panel shows Fahrenheit
const room = {celsius: 21}

const config = {
    type: 'folder',
    label: 'Room',
    expanded: true,
    children: [
        {
            type: 'slider',
            label: 'Temperature (°F)',
            bounds: [32, 104],
            stepSize: 0.5,
            getValue: () => room.celsius * 9 / 5 + 32,
            setValue: (fahrenheit) => {
                room.celsius = (fahrenheit - 32) * 5 / 9
                log('celsius', room.celsius.toFixed(2))
            },
        },
        {
            type: 'number',
            label: 'Temperature (°C)',
            property: [room, 'celsius'],
        },
        {
            type: 'button',
            label: 'Warmer by 1 °C',
            onClick: () => {
                room.celsius += 1
                config.uiRefresh(true)
            },
        },
    ],
    // show the change in the other component
    onChange: () => config.uiRefresh(true),
}

ui.appendChild(config)

Log