saturation/ui
DocsComponentsBlocksPages

Sections

IntroductionComponentsInstallationTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNovel EditorPaginationProgressProgressive BlurRadio GroupSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Slider

Slider

An input where the user selects a value from within a given range.

Loading...

Installation

pnpm dlx shadcn@latest add @saturation/slider

Usage

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

API Reference

PropTypeDefaultDescription
valuenumber[]—The controlled value.
defaultValuenumber[]—The default value.
maxnumber100Maximum value.
minnumber0Minimum value.
stepnumber1Step increment.

On This Page

  • Installation
  • Usage
  • API Reference