Liquid GlassAPI Reference
Liquid GlassAPI Reference
createLiquidDial
Rotary glass knob / dial component.
createLiquidDial
Creates a glass-styled rotary dial or knob for value selection.
Basic Usage
import { createLiquidDial } from '@avenra/liquid-glass';
const dial = createLiquidDial('#dial-container', {
min: 0,
max: 100,
value: 20
});
dial.on('input', ({ value }) => console.log('Dial at:', value));Props / Options
Extends LiquidGlassOptions plus:
| Prop | Type | Default | Description |
|---|---|---|---|
min | number | 0 | Minimum value |
max | number | 100 | Maximum value |
value | number | 0 | Initial value |
step | number | 1 | Step increment |
Return Value — LiquidDialHandle
| Member | Type | Description |
|---|---|---|
element | Element | The dial element |
value | number (get/set) | Current dial value |
destroy() | () => void | Clean up the component |
on('input', cb) | { value: number, element: Element } | Fired during rotation |
on('change', cb) | { value: number, element: Element } | Fired on release |
on('destroy', cb) | undefined | Fired on destruction |