HomeComponents
Components
  • AccordionDone
  • AlertDone
  • Alert DialogDone
  • Aspect RatioNo Change
  • AvatarDone
  • BadgeDone
  • BreadcrumbDone
  • ButtonDone
  • Button GroupDone
  • CalendarNo Change
  • CardDone
  • CarouselDone
  • ChartNo Change
  • CheckboxDone
  • CollapsibleNo Change
  • ComboboxDone
  • CommandDone
  • Context MenuDone
  • Data TableDone
  • Date PickerDone
  • DialogDone
  • DrawerDone
  • Dropdown MenuDone
  • EmptyNo Change
  • FieldNo Change
  • React Hook FormNo Change
  • Hover CardDone
  • InputDone
  • Input GroupDone
  • Input OTPDone
  • ItemDone
  • KbdDone
  • LabelDone
  • MenubarDone
  • Navigation MenuDone
  • PaginationDone
  • PopoverDone
  • ProgressDone
  • Radio GroupDone
  • ResizableNo Change
  • Scroll AreaNo Change
  • SelectDone
  • SeparatorDone
  • SheetDone
  • SidebarNo Change
  • SkeletonDone
  • SliderDone
  • SonnerDone
  • SpinnerDone
  • SwitchDone
  • TableNo Change
  • TabsDone
  • TextareaDone
  • ToastDone
  • ToggleDone
  • Toggle GroupDone
  • TooltipDone
  • TypographyDone

Slider

Glassy slider with sharp edges and muted track that fits the Omni form system.

Slider component

Capacity
Used for intensity controls and resource allocations.
Storage
Throughput

Installation

pnpm dlx shadcn@latest add @omni/slider

Usage

import { Slider } from "@/components/ui/slider"
<Slider defaultValue={[50]} max={100} step={5} />