Liquid GlassAPI Reference
Liquid GlassAPI Reference
createLiquidSlider
Horizontal range slider with glass effects.
createLiquidSlider
Creates a glass-styled horizontal range slider.
Basic Usage
import { createLiquidSlider } from '@avenra/liquid-glass';
const slider = createLiquidSlider('#my-slider', {
min: 0,
max: 100,
value: 50
});
slider.on('input', ({ value }) => console.log('Current value:', value));Props / Options
Extends LiquidGlassOptions plus:
| Prop | Type | Default | Description |
|---|---|---|---|
min | number | 0 | Minimum value |
max | number | 100 | Maximum value |
value | number | 50 | Initial value |
step | number | 1 | Step increment |
Return Value — LiquidSliderHandle
| Member | Type | Description |
|---|---|---|
element | Element | The slider container element |
value | number (get/set) | Current slider value |
destroy() | () => void | Clean up the component |
on('input', cb) | { value: number, element: Element } | Fired during drag |
on('change', cb) | { value: number, element: Element } | Fired on release |
on('destroy', cb) | undefined | Fired on destruction |