Slider

Choose a value or range by dragging a thumb along a track.

React, Vue, Solid, and Svelte

SourceRecipeArk UI docs
40

Built on Ark UI's Slider. Pass two values for a range with two thumbs, and use Slider.MarkerGroup to label points on the track.

Usage

import { Slider } from "@isbatak/react-ui/slider"

export function SliderDemo() {
  return (
    <Slider.Root defaultValue={[40]} width="full" maxW="xs">
      <Slider.Label>Volume</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}