Slider

A draggable slider for continuous values. Supports vertical and horizontal orientations.

Basic usage

Renderable API

import { SliderRenderable, createCliRenderer } from "@opentui/core"

const renderer = await createCliRenderer()

const slider = new SliderRenderable(renderer, {
  id: "volume",
  orientation: "horizontal",
  width: 30,
  height: 1,
  min: 0,
  max: 100,
  value: 25,
  onChange: (value) => {
    console.log("Value:", value)
  },
})

renderer.root.add(slider)

Vertical slider

const slider = new SliderRenderable(renderer, {
  orientation: "vertical",
  width: 2,
  height: 10,
  min: 0,
  max: 1,
  value: 0.5,
})

Construct API

Not available yet. Use SliderRenderable for now.

Properties

PropertyTypeDefaultDescription
orientation"vertical" or "horizontal"-Slider direction
valuenumberminCurrent value
minnumber0Minimum value
maxnumber100Maximum value
viewPortSizenumberrange * 0.1Thumb size relative to content
backgroundColorstring or RGBA-Track color
foregroundColorstring or RGBA-Thumb color
onChange(value: number) => void-Fired when value changes