Slider

Picks a number from a range by dragging or with the keyboard.

SliderProps packages/core/src/controls.ts:89 ↗

Import

import { Slider } from "@tarve/core";

Usage

Slider.tsx

import { Slider } from "@tarve/core";

let volume = 40;

<Slider
  label="Volume"
  value={volume}
  min={0}
  max={100}
  step={5}
  onValueChange={(value) => {
    volume = value;
  }}
/>

Props

Prop	Type	Default
`value` required	`number`	—
`disabled`	`boolean`	—
`label`	`string`	—
`max`	`number`	`100`
`min`	`number`	`0`
`onValueChange`	`(value: number) => void`	—
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`
`step`	`number`	`1`

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle