DOCSEARCHbyAlgolia
Submit Docs

react-slider Documentation

repository·master·Indexed 21 days ago

https://github.com/zillow/react-slider

An accessible and CSS-agnostic slider component for React applications. It supports single and multi-thumb configurations, horizontal and vertical orientations, and custom rendering for thumbs, tracks, and marks. The ReactSlider component can be used as a controlled or uncontrolled component and provides extensive props for behavior, styling, and accessibility.

Tokens
1.4K
Snippets
3
Records
9
Agent score
25%

What's inside react-slider

  4. Configure slider marks

    master

    The marks prop allows you to display visual indicators on the slider track. It accepts three types of values:

    1. Boolean: If true, shows all marks in every step between min and max.
    2. Number: If a number n is passed, it shows marks at every n-th step (e.g., passing 3 shows marks at 3, 6, 9...).
    3. Array of numbers: Shows only the specific marks provided in the array.

  6. Handle ReactSlider change events

    master

    The ReactSlider component provides several lifecycle callbacks for responding to user interactions:

    • onBeforeChange(value, index): Called before a thumb starts moving. Only called if the action results in a change.
    • onChange(value, index): Called on every value change during movement.
    • onAfterChange(value, index): Called after a thumb movement is completed.
    • onSliderClick(value): Called when the slider track or a thumb is clicked. Returns the value at the clicked position.

  7. Customizing Thumb, Track, and Mark rendering

    master

    You can override the default HTML elements for the slider components using render props. This is useful for injecting custom styles or complex UI components.

    renderThumb

    (props, state) => <div {...props} />
    • props: Attributes to spread onto the thumb node (ref, className, style, aria attributes, etc.).
    • state: { index: number, value: number | number[], valueNow: number }.

    renderTrack

    (props, state) => <div {...props} />
    • props: Attributes to spread onto the track node.
    • state: { index: number, value: number | number[] }.

    renderMark

    (props) => <span {...props} />
    • props: Attributes to spread onto the mark node.

  8. Configure ReactSlider props

    master

    The ReactSlider component accepts several props to control its behavior and appearance:

    Value and Range

    • min (number): The minimum value of the slider. Defaults to 0.
    • max (number): The maximum value of the slider. Defaults to 100.
    • step (number): The increment value. Defaults to 1.
    • defaultValue (number | number[]): Initial positions for thumbs. If an array is provided, it renders multiple thumbs.
    • value (number | number[]): The current value(s). Use this for controlled components.

    Behavior

    • orientation ('horizontal' | 'vertical'): The direction of the slider. Defaults to 'horizontal'.
    • minDistance (number): The minimal distance between any pair of thumbs. Defaults to 0.
    • pearling (boolean): If true, moving a thumb will push other thumbs away to maintain minDistance. If false, thumbs will stop at the minDistance boundary.
    • disabled (boolean): If true, thumbs cannot be moved. Defaults to false.
    • snapDragDisabled (boolean): If true, clicking the slider track will not move the nearest thumb.
    • invert (boolean): Inverts the slider direction.
    • pageFn (function): Customizes the value change when Page Up or Page Down keys are pressed. Receives step as an argument. Defaults to step => step * 10.

    Styling and Customization

    • className (string): CSS class for the slider node.
    • thumbClassName (string): CSS class for thumb nodes. Thumbs also receive numbered classes like ${thumbClassName}-0.
    • thumbActiveClassName (string): CSS class for the thumb currently being moved.
    • withTracks (boolean): If true, renders tracks between thumbs. Defaults to true.
    • trackClassName (string): CSS class for track fragments.
    • markClassName (string): CSS class for marks.
    • renderThumb (function): Custom render function for thumbs. Receives (props, state) where state includes index, value, and valueNow.
    • renderTrack (function): Custom render function for tracks. Receives (props, state) where state includes index and value.
    • renderMark (function): Custom render function for marks. Receives (props).

    Accessibility

    • ariaLabel (string | string[]): ARIA label for thumbs.
    • ariaLabelledby (string | string[]): ARIA labelledby for thumbs.
    • ariaValuetext (string | function): ARIA value text. If a function, it receives state (containing index, value, and valueNow).

  9. Use the ReactSlider component

    master

    The react-slider package provides a default export, ReactSlider, which is the primary component used to render a slider UI. You can import it directly from the package root.

    import ReactSlider from 'react-slider';

// Usage example (requires props defined in ReactSlider component)
function MyComponent() {
  return <ReactSlider />;
}