title: Slider description: Choose a continuous value with a mouse-dragged slider

Slider

Slider selects a continuous value by dragging a horizontal or vertical thumb. Use Select for discrete choices.

Availability

Field	Availability
Package	`@opentui/core`
Core renderable	`SliderRenderable`
React	Unavailable
Solid	Unavailable
Status	Built-in Core renderable

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)

value: 25
       ██▌
0                          100

Vertical slider

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

min 0

           ▄▄
           ██
value 0.5  ██
           ██
           ██
           ▀▀

max 1

Properties

Property	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

ScrollBar uses the same track-and-thumb model for a scroll position. Read Interaction, focus, and selection for pointer input and event behavior.