▚Slider
A draggable slider for continuous values. Supports vertical and horizontal orientations.
$ termino slider-demo
volume 65 ██████████████████████████░░░░░░░░░░░░░░
event focus() — use arrows
##Basic usage
Construct API is not available yet — use SliderRenderable directly:
1import { SliderRenderable, createCliRenderer } from "@opentui/core"23const renderer = await createCliRenderer()45const slider = new SliderRenderable(renderer, {6id: "volume",7orientation: "horizontal",8width: 30,9height: 1,10min: 0,11max: 100,12value: 25,13onChange: (value) => {14 console.log("Value:", value)15},16})1718renderer.root.add(slider)
##Vertical slider
1const slider = new SliderRenderable(renderer, {2orientation: "vertical",3width: 2,4height: 10,5min: 0,6max: 1,7value: 0.5,8})
##Properties
properties
| prop | type | default | description |
|---|---|---|---|
| orientation | "vertical" | "horizontal" | required | Slider direction |
| value | number | min | Current value |
| min | number | 0 | Minimum value |
| max | number | 100 | Maximum value |
| viewPortSize | number | Math.max(1, (max - min) * 0.1) | Viewport size used to calculate the thumb size |
| backgroundColor | ColorInput | "#252527" | Track color |
| foregroundColor | ColorInput | "#9a9ea3" | Thumb color |
| onChange | (value: number) => void | - | Called when the stored value changes |