Twigs Logo
Playground
Get StartedComponentsIconsEditorTools

Slider

A powerful input component for selecting values within a specified range. Perfect for volume controls, form inputs, and interactive value selection with support for single values, ranges, custom styling, and comprehensive accessibility features.

Import

import { Slider } from "@sparrowengg/twigs-react";

Usage

const SliderExample = () => {
  const [value, setValue] = useState([50]);
  return (
    <Box css={{ display: "flex", flexDirection: "column", gap: "$4", width: "300px" }}>
      <Text css={{ fontSize: "$md", fontWeight: "$6" }}>Basic Slider</Text>
      <Slider
        value={value}
        onValueChange={setValue}
        min={0}
        max={100}
        step={1}
        size="md"
        labels={{
          left: "0",
          right: "100"
        }}
      />
      <Text css={{ fontSize: "$sm", color: "$neutral700" }}>
        Current value: {value[0]}
      </Text>
    </Box>
  );
};

Examples

variants and customization

The slider component supports a wide range of features including range selection, custom stepping, multiple sizes, label placement, and component customization.

Component Customization Best Practice

When customizing slider components using the components prop, it's recommended to render each component as a separate function outside the main component. This approach provides better performance, cleaner code organization, and proper state handling.

Instead of inline component definitions, create dedicated functions like RenderedThumb, RenderedRange, and RenderedTrack to ensure optimal re-rendering behavior and maintainability.

Props

Slider

PropTypeDefault
value?
number[]
-
defaultValue?
number[]
-
onValueChange?
(value: number[]) => void
-
onValueCommit?
(value: number[]) => void
-
min?
number
0
max?
number
100
step?
number
1
minStepsBetweenThumbs?
number
0
disabled?
boolean
false
orientation?
'horizontal' | 'vertical'
'horizontal'
dir?
'ltr' | 'rtl'
-
inverted?
boolean
false
name?
string
-
form?
string
-
asChild?
boolean
false
size?
'sm' | 'md' | 'lg'
'md'
labels?
{ left?: string | ReactNode; right?: string | ReactNode }
-
labelPlacement?
'top' | 'bottom'
'top'
components?
Record<'Track' | 'Range' | 'Thumb' | 'ThumbLeft' | 'ThumbRight', ElementType>
-
css?
object
-

Data Attributes

These props are used for the conditional rendering of the components

PropTypeDefault
[data-disabled]?
boolean
-
[data-orientation]?
'horizontal' | 'vertical'
-

Separator

A visual divider that separates content sections both horizontally and vertically. Perfect for organizing layouts, navigation menus, and content sections with clean visual separation.

Switch

A toggle control that allows users to switch between two states. Perfect for enabling/disabling features, toggling settings, and binary choices with smooth animations and full keyboard accessibility.