Explorer

Slider

Premium solid slider with full Base UI part coverage, labels, value readout, range thumbs, form integration, and state-aware styling.

Componentsdocsbase-ui/slider

Installation

npx shadcn@latest add https://ui.edbn.me/api/analytics/registry/slider.json

Manual

API Reference

Root

Groups all slider parts. Renders a div element.

namestring

Field name used when a form is submitted.

formstring

ID of the form that owns the slider inputs.

defaultValuenumber | readonly number[]

Initial uncontrolled slider value.

valuenumber | readonly number[]

Controlled slider value.

onValueChange(value, eventDetails) => void

Called when the slider value changes.

onValueCommitted(value, eventDetails) => void

Called when pointer or keyboard interaction commits.

minnumber

=0

Minimum allowed value.

maxnumber

=100

Maximum allowed value.

stepnumber

=1

Step increment.

largeStepnumber

=10

Step used by Page Up/Down or Shift + Arrow keys.

minStepsBetweenValuesnumber

=0

Minimum step distance between range thumbs.

orientation'horizontal' | 'vertical'

='horizontal'

Slider orientation.

thumbAlignment'center' | 'edge' | 'edge-client-only'

='center'

How thumbs align to the control edges at min and max.

thumbCollisionBehavior'push' | 'swap' | 'none'

='push'

How range thumbs behave when they collide.

formatIntl.NumberFormatOptions

Formatting options for displayed values.

localeIntl.LocalesArgument

=runtime locale

Locale used when formatting values.

disabledboolean

=false

Disables slider interaction.

classNamestring | ((state) => string | undefined)

CSS class name or state function.

styleReact.CSSProperties | ((state) => React.CSSProperties | undefined)

Inline style object or state function.

renderReactElement | ((props, state) => ReactElement)

Custom render element or render function.

Root data attributes
Attribute	Description
data-dragging	Present while a thumb is being dragged.
data-orientation	Slider orientation: horizontal or vertical.
data-disabled	Present when the slider is disabled.
data-valid	Present when wrapped in a valid Field.Root.
data-invalid	Present when wrapped in an invalid Field.Root.
data-dirty	Present when the field value changed from its initial value.
data-touched	Present when the field has been touched.
data-focused	Present when the field is focused.

Label

Accessible label automatically associated with the slider thumbs. Renders a div element.

classNamestring | ((state) => string | undefined)

CSS class name or state function.

styleReact.CSSProperties | ((state) => React.CSSProperties | undefined)

Inline style object or state function.

renderReactElement | ((props, state) => ReactElement)

Custom render element or render function.

Value

Displays formatted current values. Renders an output element.

childrennull | ((formattedValues, values) => React.ReactNode)

Optional render callback for custom value text.

classNamestring | ((state) => string | undefined)

CSS class name or state function.

styleReact.CSSProperties | ((state) => React.CSSProperties | undefined)

Inline style object or state function.

renderReactElement | ((props, state) => ReactElement)

Custom render element or render function.

Value data attributes
Attribute	Description
data-dragging	Present while a thumb is being dragged.
data-orientation	Slider orientation: horizontal or vertical.
data-disabled	Present when the slider is disabled.
data-valid	Present when wrapped in a valid Field.Root.
data-invalid	Present when wrapped in an invalid Field.Root.
data-dirty	Present when the field value changed from its initial value.
data-touched	Present when the field has been touched.
data-focused	Present when the field is focused.

Control

Clickable interactive slider area. Renders a div element.

classNamestring | ((state) => string | undefined)

CSS class name or state function.

styleReact.CSSProperties | ((state) => React.CSSProperties | undefined)

Inline style object or state function.

renderReactElement | ((props, state) => ReactElement)

Custom render element or render function.

Control data attributes
Attribute	Description
data-dragging	Present while a thumb is being dragged.
data-orientation	Slider orientation: horizontal or vertical.
data-disabled	Present when the slider is disabled.
data-valid	Present when wrapped in a valid Field.Root.
data-invalid	Present when wrapped in an invalid Field.Root.
data-dirty	Present when the field value changed from its initial value.
data-touched	Present when the field has been touched.
data-focused	Present when the field is focused.

Track

Contains the indicator and represents the full slider range. Renders a div element.

classNamestring | ((state) => string | undefined)

CSS class name or state function.

styleReact.CSSProperties | ((state) => React.CSSProperties | undefined)

Inline style object or state function.

renderReactElement | ((props, state) => ReactElement)

Custom render element or render function.

Track data attributes
Attribute	Description
data-dragging	Present while a thumb is being dragged.
data-orientation	Slider orientation: horizontal or vertical.
data-disabled	Present when the slider is disabled.
data-valid	Present when wrapped in a valid Field.Root.
data-invalid	Present when wrapped in an invalid Field.Root.
data-dirty	Present when the field value changed from its initial value.
data-touched	Present when the field has been touched.
data-focused	Present when the field is focused.

Indicator

Visualizes the selected value or range. Renders a div element.

classNamestring | ((state) => string | undefined)

CSS class name or state function.

styleReact.CSSProperties | ((state) => React.CSSProperties | undefined)

Inline style object or state function.

renderReactElement | ((props, state) => ReactElement)

Custom render element or render function.

Indicator data attributes
Attribute	Description
data-dragging	Present while a thumb is being dragged.
data-orientation	Slider orientation: horizontal or vertical.
data-disabled	Present when the slider is disabled.
data-valid	Present when wrapped in a valid Field.Root.
data-invalid	Present when wrapped in an invalid Field.Root.
data-dirty	Present when the field value changed from its initial value.
data-touched	Present when the field has been touched.
data-focused	Present when the field is focused.

Thumb

Draggable slider handle. Renders a div element and nested range input.

indexnumber

Thumb index for range sliders.

disabledboolean

=false

Disables this thumb.

getAriaLabel(index) => string

Returns the nested input aria-label.

getAriaValueText(formattedValue, value, index) => string

Returns the nested input aria-valuetext.

inputRefReact.Ref<HTMLInputElement>

Ref for the nested range input.

onBlurReact.FocusEventHandler<HTMLInputElement>

Blur handler forwarded to the nested input.

onFocusReact.FocusEventHandler<HTMLInputElement>

Focus handler forwarded to the nested input.

tabIndexnumber

Tab index forwarded to the nested input.

classNamestring | ((state) => string | undefined)

CSS class name or state function.

styleReact.CSSProperties | ((state) => React.CSSProperties | undefined)

Inline style object or state function.

renderReactElement | ((props, state) => ReactElement)

Custom render element or render function.

Thumb data attributes
Attribute	Description
data-dragging	Present while a thumb is being dragged.
data-orientation	Slider orientation: horizontal or vertical.
data-disabled	Present when the slider is disabled.
data-valid	Present when wrapped in a valid Field.Root.
data-invalid	Present when wrapped in an invalid Field.Root.
data-dirty	Present when the field value changed from its initial value.
data-touched	Present when the field has been touched.
data-focused	Present when the field is focused.
data-index	Thumb index in range sliders.

edbn/ui

Explorer

Slider

Premium solid slider with full Base UI part coverage, labels, value readout, range thumbs, form integration, and state-aware styling.

Componentsdocsbase-ui/slider

Installation

npx shadcn@latest add https://ui.edbn.me/api/analytics/registry/slider.json

Manual

API Reference

Root

Groups all slider parts. Renders a div element.

namestring

Field name used when a form is submitted.

formstring

ID of the form that owns the slider inputs.

defaultValuenumber | readonly number[]

Initial uncontrolled slider value.

valuenumber | readonly number[]

Controlled slider value.

onValueChange(value, eventDetails) => void

Called when the slider value changes.

onValueCommitted(value, eventDetails) => void

Called when pointer or keyboard interaction commits.

minnumber

=0

Minimum allowed value.

maxnumber

=100

Maximum allowed value.

stepnumber

=1

Step increment.

largeStepnumber

=10

Step used by Page Up/Down or Shift + Arrow keys.

minStepsBetweenValuesnumber

=0

Minimum step distance between range thumbs.

orientation'horizontal' | 'vertical'

='horizontal'

Slider orientation.

thumbAlignment'center' | 'edge' | 'edge-client-only'

='center'

How thumbs align to the control edges at min and max.

thumbCollisionBehavior'push' | 'swap' | 'none'

='push'

How range thumbs behave when they collide.

formatIntl.NumberFormatOptions

Formatting options for displayed values.

localeIntl.LocalesArgument

=runtime locale

Locale used when formatting values.

disabledboolean

=false

Disables slider interaction.

classNamestring | ((state) => string | undefined)

CSS class name or state function.

styleReact.CSSProperties | ((state) => React.CSSProperties | undefined)

Inline style object or state function.

renderReactElement | ((props, state) => ReactElement)

Custom render element or render function.

Root data attributes
Attribute	Description
data-dragging	Present while a thumb is being dragged.
data-orientation	Slider orientation: horizontal or vertical.
data-disabled	Present when the slider is disabled.
data-valid	Present when wrapped in a valid Field.Root.
data-invalid	Present when wrapped in an invalid Field.Root.
data-dirty	Present when the field value changed from its initial value.
data-touched	Present when the field has been touched.
data-focused	Present when the field is focused.

Label

Accessible label automatically associated with the slider thumbs. Renders a div element.

classNamestring | ((state) => string | undefined)

CSS class name or state function.

styleReact.CSSProperties | ((state) => React.CSSProperties | undefined)

Inline style object or state function.

renderReactElement | ((props, state) => ReactElement)

Custom render element or render function.

Value

Displays formatted current values. Renders an output element.

childrennull | ((formattedValues, values) => React.ReactNode)

Optional render callback for custom value text.

classNamestring | ((state) => string | undefined)

CSS class name or state function.

styleReact.CSSProperties | ((state) => React.CSSProperties | undefined)

Inline style object or state function.

renderReactElement | ((props, state) => ReactElement)

Custom render element or render function.

Value data attributes
Attribute	Description
data-dragging	Present while a thumb is being dragged.
data-orientation	Slider orientation: horizontal or vertical.
data-disabled	Present when the slider is disabled.
data-valid	Present when wrapped in a valid Field.Root.
data-invalid	Present when wrapped in an invalid Field.Root.
data-dirty	Present when the field value changed from its initial value.
data-touched	Present when the field has been touched.
data-focused	Present when the field is focused.

Control

Clickable interactive slider area. Renders a div element.

classNamestring | ((state) => string | undefined)

CSS class name or state function.

styleReact.CSSProperties | ((state) => React.CSSProperties | undefined)

Inline style object or state function.

renderReactElement | ((props, state) => ReactElement)

Custom render element or render function.

Control data attributes
Attribute	Description
data-dragging	Present while a thumb is being dragged.
data-orientation	Slider orientation: horizontal or vertical.
data-disabled	Present when the slider is disabled.
data-valid	Present when wrapped in a valid Field.Root.
data-invalid	Present when wrapped in an invalid Field.Root.
data-dirty	Present when the field value changed from its initial value.
data-touched	Present when the field has been touched.
data-focused	Present when the field is focused.

Track

Contains the indicator and represents the full slider range. Renders a div element.

classNamestring | ((state) => string | undefined)

CSS class name or state function.

styleReact.CSSProperties | ((state) => React.CSSProperties | undefined)

Inline style object or state function.

renderReactElement | ((props, state) => ReactElement)

Custom render element or render function.

Track data attributes
Attribute	Description
data-dragging	Present while a thumb is being dragged.
data-orientation	Slider orientation: horizontal or vertical.
data-disabled	Present when the slider is disabled.
data-valid	Present when wrapped in a valid Field.Root.
data-invalid	Present when wrapped in an invalid Field.Root.
data-dirty	Present when the field value changed from its initial value.
data-touched	Present when the field has been touched.
data-focused	Present when the field is focused.

Indicator

Visualizes the selected value or range. Renders a div element.

classNamestring | ((state) => string | undefined)

CSS class name or state function.

styleReact.CSSProperties | ((state) => React.CSSProperties | undefined)

Inline style object or state function.

renderReactElement | ((props, state) => ReactElement)

Custom render element or render function.

Indicator data attributes
Attribute	Description
data-dragging	Present while a thumb is being dragged.
data-orientation	Slider orientation: horizontal or vertical.
data-disabled	Present when the slider is disabled.
data-valid	Present when wrapped in a valid Field.Root.
data-invalid	Present when wrapped in an invalid Field.Root.
data-dirty	Present when the field value changed from its initial value.
data-touched	Present when the field has been touched.
data-focused	Present when the field is focused.

Thumb

Draggable slider handle. Renders a div element and nested range input.

indexnumber

Thumb index for range sliders.

disabledboolean

=false

Disables this thumb.

getAriaLabel(index) => string

Returns the nested input aria-label.

getAriaValueText(formattedValue, value, index) => string

Returns the nested input aria-valuetext.

inputRefReact.Ref<HTMLInputElement>

Ref for the nested range input.

onBlurReact.FocusEventHandler<HTMLInputElement>

Blur handler forwarded to the nested input.

onFocusReact.FocusEventHandler<HTMLInputElement>

Focus handler forwarded to the nested input.

tabIndexnumber

Tab index forwarded to the nested input.

classNamestring | ((state) => string | undefined)

CSS class name or state function.

styleReact.CSSProperties | ((state) => React.CSSProperties | undefined)

Inline style object or state function.

renderReactElement | ((props, state) => ReactElement)

Custom render element or render function.

Thumb data attributes
Attribute	Description
data-dragging	Present while a thumb is being dragged.
data-orientation	Slider orientation: horizontal or vertical.
data-disabled	Present when the slider is disabled.
data-valid	Present when wrapped in a valid Field.Root.
data-invalid	Present when wrapped in an invalid Field.Root.
data-dirty	Present when the field value changed from its initial value.
data-touched	Present when the field has been touched.
data-focused	Present when the field is focused.
data-index	Thumb index in range sliders.