Slider

An unstyled, accessible slider component with compound composition.

Build fully custom sliders and range inputs with complete control over track, range, and thumb rendering.

basic-demo

Pre-styled Versions

Choose a pre-styled library to use Slider with ready-made designs.

Styled

Theme-based styling with CSS variables

Tailwind

Utility-first styling with Tailwind CSS

For hook-based usage without components, see the Headless API.

Features#

Compound component API with four sub-components: Root, Track, Range, Thumb
Single value and range mode with multiple thumbs
Horizontal and vertical orientation
Configurable step size and minimum thumb distance

Usage#

import { Slider } from 'primereact/slider';

<Slider.Root>
    <Slider.Track>
        <Slider.Range />
    </Slider.Track>
    <Slider.Thumb />
</Slider.Root>

Behavior#

Polymorphic Rendering#

Use as on any sub-component to change the rendered HTML element.

<Slider.Root as="div">
    <Slider.Track as="div">
        <Slider.Range as="div" />
    </Slider.Track>
    <Slider.Thumb as="div" />
</Slider.Root>

Default elements: Root=span, Track=span, Range=span, Thumb=span.

Render Function Children#

Thumb accepts a render function as children, providing access to the component instance. The instance exposes slider (root instance with state.value and state.isDragging).

<Slider.Thumb>{(instance) => <span>{instance.slider?.getThumbValue(0)}</span>}</Slider.Thumb>

Pass Through#

Some parts may not be visible in the preview depending on the component's current state.

/* Select a part to see its CSS selector for custom styling */

API#

SliderRoot#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: SliderRootInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: SliderRootInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`SliderRootInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<SliderRootPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: SliderRootInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`value`	`number` \| `number[]`	—
Value of the component.
`defaultValue`	`number` \| `number[]`	—
The default value for the input when not controlled by `value` .
`min`	`number`	`0`
Mininum boundary value.
`max`	`number`	`100`
Maximum boundary value.
`orientation`	`"horizontal"` \| `"vertical"`	`horizontal`
Orientation of the slider.
`step`	`number`	`1`
Step factor to increment/decrement the value.
`minStepsBetweenThumbs`	`number`	`0`
Minimum steps between thumbs.
`readOnly`	`boolean`	`false`
Whether the component is read-only.
`invalid`	`boolean`	`false`
When present, it specifies that the element should be invalid.
`onFocus`	`(event: FocusEvent<HTMLInputElement>) => void`	—
Callback to invoke when a thumb input receives focus.
`onBlur`	`(event: FocusEvent<HTMLInputElement>) => void`	—
Callback to invoke when a thumb input loses focus.
`disabled`	`boolean`	`false`
When present, it specifies that the element should be disabled.
`onValueChange`	`(event: SliderRootChangeEvent) => void`	—
Callback fired when the ToggleButton's pressed state changes.
`onValueChangeEnd`	`(event: SliderRootChangeEvent) => void`	—
Callback fired when the pointer interaction ends.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-orientation`	`"horizontal"` or `"vertical"`
`data-disabled`	Present when disabled
`data-dragging`	Present when dragging

Defines passthrough(pt) options of Slider component.

label	type	description
root	SliderRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.
range	SliderRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the range's DOM element.
thumb	SliderRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the thumb's DOM element.

SliderTrack#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: SliderTrackInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: SliderTrackInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`SliderTrackInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<SliderTrackPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: SliderTrackInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-orientation`	`"horizontal"` or `"vertical"`
`data-disabled`	Present when disabled
`data-dragging`	Present when dragging

Defines passthrough(pt) options of SliderTrack component.

label	type	description
root	SliderTrackPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

SliderRange#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: SliderRangeInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: SliderRangeInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`SliderRangeInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<SliderRangePassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: SliderRangeInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-orientation`	`"horizontal"` or `"vertical"`
`data-disabled`	Present when disabled
`data-dragging`	Present when dragging

Defines passthrough(pt) options of SliderRange component.

label	type	description
root	SliderRangePassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

SliderThumb#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: SliderThumbInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: SliderThumbInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`SliderThumbInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<SliderThumbPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: SliderThumbInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`index`	`number`	`0`
Index of the thumb.
`tabIndex`	`number`	`0`
Index of the element in tabbing order.
`ariaLabel`	`string`	—
Establishes a string value that labels the component.
`ariaLabelledby`	`string`	—
Establishes relationships between the component and label(s) where its value should be one or more element IDs.
`name`	`string`	—
Name attribute of the input.
`inputId`	`string`	—
Id of the input.
`inputStyle`	`CSSProperties`	—
Style of the input element.
`inputClassName`	`string`	—
Style class of the input element.
`disabled`	`boolean`	`false`
When present, it specifies that the element should be disabled.
`readOnly`	`boolean`	`false`
When present, it specifies that the element should be read-only.
`invalid`	`boolean`	`false`
When present, it specifies that the element is invalid.
`required`	`boolean`	—
When present, it specifies that the element is required.
`onFocus`	`FocusEventHandler<HTMLInputElement>`	—
Callback fired on focus.
`onBlur`	`FocusEventHandler<HTMLInputElement>`	—
Callback fired on blur.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-index`	Thumb index number
`data-orientation`	`"horizontal"` or `"vertical"`
`data-disabled`	Present when disabled
`data-dragging`	Present when dragging

Defines passthrough(pt) options of SliderThumb component.

label	type	description
root	SliderThumbPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

Accessibility#

Slider component uses a native range input internally with slider role. The input includes aria-orientation, aria-valuemin, aria-valuemax, and aria-valuenow attributes. Value to describe the component can be defined using aria-labelledby and aria-label props on Thumb.

<span id="slider_label">Volume</span>
<Slider.Root>
    <Slider.Track>
        <Slider.Range />
    </Slider.Track>
    <Slider.Thumb aria-labelledby="slider_label" />
</Slider.Root>
 
<Slider.Root>
    <Slider.Track>
        <Slider.Range />
    </Slider.Track>
    <Slider.Thumb aria-label="Volume" />
</Slider.Root>

Keyboard Support#

Key	Function
`tab`	Moves focus to the slider.
`left arrow` / `up arrow`	Decrements the value.
`right arrow` / `down arrow`	Increments the value.
`home`	Set the minimum value.
`end`	Set the maximum value.
`page up`	Increments the value by 10 steps.
`page down`	Decrements the value by 10 steps.