Slider

Range input with a custom track and thumb. Supports a label, live value readout, min/max/step configuration, and disabled state.

Import

tsx

import { Slider } from '@velocityuikit/velocityui'

Preview

With label and value

Volume40

Custom range and step

Budget100

Sizes

Disabled

Locked

Props

Prop	Type	Default	Description
value	`number`	—	Controlled value.
onChange	`(value: number) => void`	—	Callback fired when the value changes.
min	`number`	`0`	Minimum value.
max	`number`	`100`	Maximum value.
step	`number`	`1`	Step increment.
label	`string`	—	Label displayed above the slider.
showValue	`boolean`	`false`	Shows the current numeric value to the right of the label.
size	`'sm' \| 'md' \| 'lg'`	`'md'`	Height of the track area.
disabled	`boolean`	`false`	Disables interaction.

Examples

Basic

tsx

import { Slider } from '@velocityuikit/velocityui'
import { useState } from 'react'

export default function Example() {
  const [val, setVal] = useState(40)
  return <Slider value={val} onChange={setVal} label="Volume" showValue />
}

Stepped

tsx

import { Slider } from '@velocityuikit/velocityui'
import { useState } from 'react'

export default function Example() {
  const [val, setVal] = useState(50)
  return <Slider value={val} onChange={setVal} min={0} max={200} step={25} label="Budget" showValue />
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

css

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean  tangerine */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */