Contained SliderPro
Pro
Combines a slider with supporting information such as labels, values, and icons within a single container.
Horizontal Contained Slider Playground
Horizontal Contained Slider Playground
Preview
Code
Label
60
Controls
Size:
Small
Medium
Large
Type:
Neutral
Primary
Style:
Simple
Expressive
Leading:
Text
Icon
Stops:
Stop Style:
Circle
Line
Disabled:
Vertical Contained Slider Playground
Vertical Contained Slider Playground
Preview
Code
60
Controls
Size:
Small
Medium
Large
Type:
Neutral
Primary
Style:
Simple
Expressive
Stops:
Stop Style:
Circle
Line
Disabled:
Installation
You can add the contained slider component to your project manually:
1
Install the following dependencies:
npm
pnpm
yarn
bun
npm install class-variance-authority clsx tailwind-merge @react-aria/focus @react-aria/interactions @react-aria/utils2
Copy and paste the following code into your project.
Loading...
3
Update the import paths to match your project setup.
Update the import aliases (e.g. @/components, @/utils) in the copied files to match your project's path configuration.
Basic Usage
Horizontal Contained Slider
import { useState } from 'react';
import { HorizontalContainedSlider } from '@versaui/ui/components/ContainedSlider';
function Example() {
const [value, setValue] = useState(50);
return (
<HorizontalContainedSlider
value={value}
onValueChange={setValue}
editLabelText="Volume"
size="Medium"
type="Primary"
style="Expressive"
/>
);
}Vertical Contained Slider
import { useState } from 'react';
import { VerticalContainedSlider } from '@versaui/ui/components/ContainedSlider';
function Example() {
const [value, setValue] = useState(75);
return (
<VerticalContainedSlider
value={value}
onValueChange={setValue}
size="Medium"
type="Primary"
style="Expressive"
/>
);
}Standalone Slider Tracks
import { HorizontalSliderTrack, VerticalSliderTrack } from '@versaui/ui/components/ContainedSlider';
// Horizontal track
<HorizontalSliderTrack value={60} size="Medium" type="Primary" style="Expressive" />
// Vertical track
<VerticalSliderTrack value={80} size="Medium" type="Neutral" style="Simple" />Variants
Size
Large: 48px container height (horizontal) / 48px width (vertical) with 8px radius.Medium: 40px container height (horizontal) / 40px width (vertical) with 8px radius (default).Small: 32px container height (horizontal) / 32px width (vertical) with 6px radius.
Type & Style
Neutral/Primarytype options.Simple(flat solid background surface) vsExpressive(gradient background with drop and inset elevation shadows, and duotone icon styling).
Leading Item (Horizontal)
Text: Displays text label on the left.Icon: Displays leading icon on the left.
Accessibility
- Built using React Aria (
useHover,useFocusRing). - Follows the WAI-ARIA Slider specification (
role="slider",aria-valuenow,aria-valuemin,aria-valuemax,aria-orientation). - Keyboard support: Arrow keys adjust value by step, PageUp / PageDown shift value by 10%, Home / End jump to min / max.
Component Props
HorizontalContainedSlider Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | undefined | Controlled value of the slider. |
defaultValue | number | 0 | Default value for uncontrolled usage. |
onValueChange | (value: number) => void | undefined | Callback fired on value change. |
min | number | 0 | Minimum value. |
max | number | 100 | Maximum value. |
step | number | 1 | Granularity step increment. |
size | 'Small' | 'Medium' | 'Large' | 'Medium' | Container height and radius size variant. |
type | 'Neutral' | 'Primary' | 'Neutral' | Color scheme theme. |
style | 'Simple' | 'Expressive' | 'Simple' | Flat vs expressive gradient/shadow style. |
leadingItem | 'Text' | 'Icon' | 'Text' | Left side element type. |
editLabelText | string | 'Label' | Text label content. |
stops | boolean | true | Renders discrete stop markers. |
stopStyle | 'circle' | 'line' | 'circle' | Shape of stop markers (circle or 2x6px line). |
disabled | boolean | false | Disables slider interaction. |
dir | 'ltr' | 'rtl' | 'ltr' | Text/layout direction. |
VerticalContainedSlider Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | undefined | Controlled value of the slider. |
defaultValue | number | 0 | Default value for uncontrolled usage. |
onValueChange | (value: number) => void | undefined | Callback fired on value change. |
min | number | 0 | Minimum value. |
max | number | 100 | Maximum value. |
step | number | 1 | Granularity step increment. |
size | 'Small' | 'Medium' | 'Large' | 'Medium' | Container width and radius size variant. |
type | 'Neutral' | 'Primary' | 'Neutral' | Color scheme theme. |
style | 'Simple' | 'Expressive' | 'Simple' | Flat vs expressive gradient/shadow style. |
stops | boolean | true | Renders discrete stop markers. |
stopStyle | 'circle' | 'line' | 'circle' | Shape of stop markers (circle or 2x6px line). |
disabled | boolean | false | Disables slider interaction. |