base-slider-vertical

PreviousNext
Docs
reuicomponent

Preview

Loading preview…
registry/default/components/base-slider/vertical.tsx
import { Slider } from '@/registry/default/ui/base-slider';

export default function Component() {
  return (
    <div className="*:not-first:mt-4 w-full max-w-xs">
      <div className="flex h-40 justify-center">
        <Slider
          defaultValue={[2, 7]}
          max={10}
          orientation="vertical"
          aria-label="Vertical slider"
          showTooltip={true}
          tooltipContent={(value) => `Value: ${value}`}
          tooltipVariant="light"
        />
      </div>
    </div>
  );
}

Installation

npx shadcn@latest add @reui/base-slider-vertical

Usage

import { BaseSliderVertical } from "@/components/base-slider-vertical"
<BaseSliderVertical />