State class applied to {{nodeName}} if {{conditions}}.

Class name applied to {{nodeName}} if {{conditions}}.

The id of the element containing a label for the slider.

A string value that provides a user-friendly name for the current value of the slider.

The default value. Use when the component is not controlled.

If <code>true</code>, the active thumb doesn&#39;t swap when moving pointer over a thumb while dragging another thumb.

If <code>true</code>, the component is disabled.

Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider. This is important for screen reader users.

Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider. This is important for screen reader users.

If <code>true</code> the Slider will be rendered right-to-left (with the lowest value on the right-hand side).

Marks indicate predetermined values to which the user can move the slider. If <code>true</code> the marks are spaced according the value of the <code>step</code> prop. If an array, it should contain objects with <code>value</code> and an optional <code>label</code> keys.

The maximum allowed value of the slider. Should not be equal to min.

The minimum allowed value of the slider. Should not be equal to max.

Name attribute of the hidden <code>input</code> element.

Callback function that is fired when the slider&#39;s value changed.

Callback function that is fired when the <code>mouseup</code> is triggered.

A transformation function, to change the scale of the slider.

The props used for each slot inside the Slider.

The components used for each slot inside the Slider. Either a string to use a HTML element or a component.

The granularity with which the slider can step through values. (A &quot;discrete&quot; slider.) The <code>min</code> prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step. When step is <code>null</code>, the thumb can only be slid onto marks provided with the <code>marks</code> prop.

Tab index attribute of the hidden <code>input</code> element.

The track presentation:
<ul>
<li><code>normal</code> the track will render a bar representing the slider value.</li>
<li><code>inverted</code> the track will render a bar representing the remaining slider value.</li>
<li><code>false</code> the track will render without a bar.</li>
</ul>

The value of the slider. For ranged sliders, provide an array with two values.

The format function the value label&#39;s value. When a function is provided, it should have the following signature: - {number} value The value label&#39;s value to format - {number} index The value label&#39;s index to format

Slider

custom

string

Array&lt;number&gt; &#124;&nbsp;number

union

bool

func

Array&lt;{ label?: node, value: number }&gt; &#124;&nbsp;bool

number

enum

{ input?: func &#124;&nbsp;object, mark?: func &#124;&nbsp;object, markLabel?: func &#124;&nbsp;object, rail?: func &#124;&nbsp;object, root?: func &#124;&nbsp;object, thumb?: func &#124;&nbsp;object, track?: func &#124;&nbsp;object, valueLabel?: any &#124;&nbsp;func }

shape

{ input?: elementType, mark?: elementType, markLabel?: elementType, rail?: elementType, root?: elementType, thumb?: elementType, track?: elementType, valueLabel?: elementType }

'inverted' &#124;&nbsp;'normal' &#124;&nbsp;false

root

track

rail

thumb

mark

The component that renders the mark label.

markLabel

The component that renders the value label.

valueLabel

input

The ref attached to the root of the Slider.

Returns the <code>offset</code> and <code>leap</code> methods to calculate the positioning styles based on the slider axis.

If <code>true</code>, the slider is being dragged.

The index of the thumb which is focused on the slider.

Resolver for the hidden input slot&#39;s props.

Resolver for the thumb slot&#39;s style prop.

The marks of the slider. Marks indicate predetermined values to which the user can move the slider.

The thumb index for the current value when in hover state.

If <code>true</code>, the slider is a range slider when the <code>value</code> prop passed is an array.

The track leap for the current value of the slider.

The track offset for the current value of the slider.

useSlider

number | number[]

boolean

boolean | Mark[]

(event: Event, value: number | number[], activeThumb: number) =&gt; void

(event: React.SyntheticEvent | Event, value: number | number[]) =&gt; void

&#39;horizontal&#39; | &#39;vertical&#39;

React.Ref&lt;Element&gt;

(value: number) =&gt; number

number | null

Axis

{ [key in Axis]: AxisProps&lt;key&gt; }

&lt;ExternalProps extends Record&lt;string, unknown&gt; = {}&gt;(externalProps?: ExternalProps) =&gt; UseSliderHiddenInputProps&lt;ExternalProps&gt;

&lt;ExternalProps extends Record&lt;string, unknown&gt; = {}&gt;(externalProps?: ExternalProps) =&gt; UseSliderRootSlotProps&lt;ExternalProps&gt;

&lt;ExternalProps extends Record&lt;string, unknown&gt; = {}&gt;(externalProps?: ExternalProps) =&gt; UseSliderThumbSlotProps&lt;ExternalProps&gt;

Slider

Slider API

Import

Props

Slots

CSS classes