replace-compound-slider API - v4.0.3
    Preparing search index...

    Interface SliderProps

    Props for the <Slider> component.

    interface SliderProps {
        children?: ReactNode;
        className?: string;
        component?:
            | "symbol"
            | "object"
            | "a"
            | "abbr"
            | "address"
            | "area"
            | "article"
            | "aside"
            | "audio"
            | "b"
            | "base"
            | "bdi"
            | "bdo"
            | "blockquote"
            | "body"
            | "br"
            | "button"
            | "canvas"
            | "caption"
            | "cite"
            | "code"
            | "col"
            | "colgroup"
            | "data"
            | "datalist"
            | "dd"
            | "del"
            | "details"
            | "dfn"
            | "dialog"
            | "div"
            | "dl"
            | "dt"
            | "em"
            | "embed"
            | "fieldset"
            | "figcaption"
            | "figure"
            | "footer"
            | "form"
            | "h1"
            | "h2"
            | "h3"
            | "h4"
            | "h5"
            | "h6"
            | "head"
            | "header"
            | "hgroup"
            | "hr"
            | "html"
            | "i"
            | "iframe"
            | "img"
            | "input"
            | "ins"
            | "kbd"
            | "label"
            | "legend"
            | "li"
            | "link"
            | "main"
            | "map"
            | "mark"
            | "menu"
            | "meta"
            | "meter"
            | "nav"
            | "noscript"
            | "ol"
            | "optgroup"
            | "option"
            | "output"
            | "p"
            | "picture"
            | "pre"
            | "progress"
            | "q"
            | "rp"
            | "rt"
            | "ruby"
            | "s"
            | "samp"
            | "script"
            | "search"
            | "section"
            | "select"
            | "slot"
            | "small"
            | "source"
            | "span"
            | "strong"
            | "style"
            | "sub"
            | "summary"
            | "sup"
            | "table"
            | "tbody"
            | "td"
            | "template"
            | "textarea"
            | "tfoot"
            | "th"
            | "thead"
            | "time"
            | "title"
            | "tr"
            | "track"
            | "u"
            | "ul"
            | "var"
            | "video"
            | "wbr"
            | "animate"
            | "animateMotion"
            | "animateTransform"
            | "circle"
            | "clipPath"
            | "defs"
            | "desc"
            | "ellipse"
            | "feBlend"
            | "feColorMatrix"
            | "feComponentTransfer"
            | "feComposite"
            | "feConvolveMatrix"
            | "feDiffuseLighting"
            | "feDisplacementMap"
            | "feDistantLight"
            | "feDropShadow"
            | "feFlood"
            | "feFuncA"
            | "feFuncB"
            | "feFuncG"
            | "feFuncR"
            | "feGaussianBlur"
            | "feImage"
            | "feMerge"
            | "feMergeNode"
            | "feMorphology"
            | "feOffset"
            | "fePointLight"
            | "feSpecularLighting"
            | "feSpotLight"
            | "feTile"
            | "feTurbulence"
            | "filter"
            | "foreignObject"
            | "g"
            | "image"
            | "line"
            | "linearGradient"
            | "marker"
            | "mask"
            | "metadata"
            | "mpath"
            | "path"
            | "pattern"
            | "polygon"
            | "polyline"
            | "radialGradient"
            | "rect"
            | "set"
            | "stop"
            | "svg"
            | "switch"
            | "text"
            | "textPath"
            | "tspan"
            | "use"
            | "view";
        disabled?: boolean;
        domain?: readonly number[];
        flatten?: boolean;
        mode?: CustomMode
        | 1
        | 2
        | 3;
        onChange?: (values: readonly number[]) => void;
        onSlideEnd?: (
            values: readonly number[],
            data: { activeHandleID: string },
        ) => void;
        onSlideStart?: (
            values: readonly number[],
            data: { activeHandleID: string },
        ) => void;
        onUpdate?: (values: readonly number[]) => void;
        reversed?: boolean;
        rootProps?: { [key: string]: any };
        rootStyle?: any;
        step?: number;
        values: readonly number[];
        vertical?: boolean;
        warnOnChanges?: boolean;
    }
    Index

    Properties

    children? className? component? disabled? domain? flatten? mode? onChange? onSlideEnd? onSlideStart? onUpdate? reversed? rootProps? rootStyle? step? values vertical? warnOnChanges?

    Properties

    children?: ReactNode

    The slider's child components — typically <Rail>, <Handles>, <Tracks>, and <Ticks>.

    className?: string

    CSS class name applied to the root element.

    component?:
        | "symbol"
        | "object"
        | "a"
        | "abbr"
        | "address"
        | "area"
        | "article"
        | "aside"
        | "audio"
        | "b"
        | "base"
        | "bdi"
        | "bdo"
        | "blockquote"
        | "body"
        | "br"
        | "button"
        | "canvas"
        | "caption"
        | "cite"
        | "code"
        | "col"
        | "colgroup"
        | "data"
        | "datalist"
        | "dd"
        | "del"
        | "details"
        | "dfn"
        | "dialog"
        | "div"
        | "dl"
        | "dt"
        | "em"
        | "embed"
        | "fieldset"
        | "figcaption"
        | "figure"
        | "footer"
        | "form"
        | "h1"
        | "h2"
        | "h3"
        | "h4"
        | "h5"
        | "h6"
        | "head"
        | "header"
        | "hgroup"
        | "hr"
        | "html"
        | "i"
        | "iframe"
        | "img"
        | "input"
        | "ins"
        | "kbd"
        | "label"
        | "legend"
        | "li"
        | "link"
        | "main"
        | "map"
        | "mark"
        | "menu"
        | "meta"
        | "meter"
        | "nav"
        | "noscript"
        | "ol"
        | "optgroup"
        | "option"
        | "output"
        | "p"
        | "picture"
        | "pre"
        | "progress"
        | "q"
        | "rp"
        | "rt"
        | "ruby"
        | "s"
        | "samp"
        | "script"
        | "search"
        | "section"
        | "select"
        | "slot"
        | "small"
        | "source"
        | "span"
        | "strong"
        | "style"
        | "sub"
        | "summary"
        | "sup"
        | "table"
        | "tbody"
        | "td"
        | "template"
        | "textarea"
        | "tfoot"
        | "th"
        | "thead"
        | "time"
        | "title"
        | "tr"
        | "track"
        | "u"
        | "ul"
        | "var"
        | "video"
        | "wbr"
        | "animate"
        | "animateMotion"
        | "animateTransform"
        | "circle"
        | "clipPath"
        | "defs"
        | "desc"
        | "ellipse"
        | "feBlend"
        | "feColorMatrix"
        | "feComponentTransfer"
        | "feComposite"
        | "feConvolveMatrix"
        | "feDiffuseLighting"
        | "feDisplacementMap"
        | "feDistantLight"
        | "feDropShadow"
        | "feFlood"
        | "feFuncA"
        | "feFuncB"
        | "feFuncG"
        | "feFuncR"
        | "feGaussianBlur"
        | "feImage"
        | "feMerge"
        | "feMergeNode"
        | "feMorphology"
        | "feOffset"
        | "fePointLight"
        | "feSpecularLighting"
        | "feSpotLight"
        | "feTile"
        | "feTurbulence"
        | "filter"
        | "foreignObject"
        | "g"
        | "image"
        | "line"
        | "linearGradient"
        | "marker"
        | "mask"
        | "metadata"
        | "mpath"
        | "path"
        | "pattern"
        | "polygon"
        | "polyline"
        | "radialGradient"
        | "rect"
        | "set"
        | "stop"
        | "svg"
        | "switch"
        | "text"
        | "textPath"
        | "tspan"
        | "use"
        | "view"

    The HTML or SVG tag name to use for the slider root element. Defaults to 'div'. Use 'svg' together with flatten for SVG sliders.

    'div'
    disabled?: boolean

    When true, all mouse, touch, and keyboard interactions are suppressed.

    false
    domain?: readonly number[]

    A two-element [min, max] tuple defining the numeric domain of the slider. The min value must always be smaller than max regardless of the reversed prop.

    [0, 100]
    flatten?: boolean

    Renders the slider's child components as siblings of the root element rather than children. Required for SVG sliders where nesting <div> inside <svg> is invalid.

    false
    mode?: CustomMode | 1 | 2 | 3

    The interaction mode controlling how multiple handles behave relative to each other.

    Mode Behaviour
    1 Crossing – handles can move freely past each other
    2 Non-crossing – handles are blocked from crossing (default range behaviour)
    3 Pushable – dragging one handle pushes adjacent ones
    CustomMode Supply your own function for full control 
    1
    onChange?: (values: readonly number[]) => void

    Called at the end of every slide interaction and on rail/track clicks. Receives the final committed array of values.

    onSlideEnd?: (
        values: readonly number[],
        data: { activeHandleID: string },
    ) => void

    Called when a drag interaction ends (mouseup / touchend).

    onSlideStart?: (
        values: readonly number[],
        data: { activeHandleID: string },
    ) => void

    Called when a drag interaction begins (mousedown / touchstart on a handle).

    onUpdate?: (values: readonly number[]) => void

    Called continuously during a drag with the current (in-progress) values. This fires at high frequency — avoid expensive operations here.

    reversed?: boolean

    Reverses the direction of the slider so that the minimum value is on the right (or bottom for vertical sliders).

    false
    rootProps?: { [key: string]: any }

    Additional props spread onto the root element (e.g. aria-label, data-testid).

    rootStyle?: any

    Inline styles applied to the root element. Tip: at minimum, set position: 'relative' and a fixed height.

    step?: number

    The increment between discrete step positions. Fractional steps (e.g. 0.5) are supported.

    0.1
    values: readonly number[]

    An array of initial (or controlled) handle values.

    • One value → single-thumb value slider
    • Two values → range slider
    • Three or more → multi-handle slider

    Values outside the domain are clamped to the nearest valid step.

    vertical?: boolean

    Set to true to render a vertical slider. The slider will use its height instead of width for position calculations.

    false
    warnOnChanges?: boolean

    When true, warns in the browser console if handle values are adjusted to fit the domain or step.

    false

    Settings

    Member Visibility

    On This Page

    Properties