@antadesign/anta
    Preparing search index...

    Interface SliderPropsUnreviewed

    Common props for JSX component wrappers.

    interface SliderProps {
        label?: ReactNode;
        value?: number | SliderRangeValue;
        defaultValue?: number | SliderRangeValue;
        min?: number;
        max?: number;
        step?: number;
        name?: string;
        disabled?: boolean;
        tone?:
            | "neutral"
            | "brand"
            | "info"
            | "success"
            | "warning"
            | "critical"
            | string & {};
        thumbTone?: | "neutral"
        | "brand"
        | "info"
        | "success"
        | "warning"
        | "critical"
        | string & {};
        size?: "small"
        | "medium"
        | "large";
        trackSize?: number | string;
        thumbSize?: number | string;
        thumbFill?: boolean;
        round?: boolean | number | string;
        valueDisplay?: "end" | "inline" | "thumb" | "none";
        valuePrefix?: string;
        valueSuffix?: string;
        markers?: SliderMarker[];
        trackClick?: "drag-only" | "jump";
        inverted?: boolean;
        onValueChange?: (event: any, attrs: SliderChangeAttrs<SliderValue>) => void;
        onValueCommit?: (event: any, attrs: SliderChangeAttrs<SliderValue>) => void;
        className?: string;
        style?: CSSProperties;
        children?: ReactNode;
        id?: string;
        title?: string;
        slot?: string;
        tabIndex?: number;
        key?: string | number | null;
        onClick?: (e: any) => void;
        onDoubleClick?: (e: any) => void;
        onAuxClick?: (e: any) => void;
        onContextMenu?: (e: any) => void;
        onMouseDown?: (e: any) => void;
        onMouseUp?: (e: any) => void;
        onMouseEnter?: (e: any) => void;
        onMouseLeave?: (e: any) => void;
        onMouseMove?: (e: any) => void;
        onMouseOver?: (e: any) => void;
        onMouseOut?: (e: any) => void;
        onPointerDown?: (e: any) => void;
        onPointerUp?: (e: any) => void;
        onPointerMove?: (e: any) => void;
        onPointerEnter?: (e: any) => void;
        onPointerLeave?: (e: any) => void;
        onPointerOver?: (e: any) => void;
        onPointerOut?: (e: any) => void;
        onPointerCancel?: (e: any) => void;
        onGotPointerCapture?: (e: any) => void;
        onLostPointerCapture?: (e: any) => void;
        onTouchStart?: (e: any) => void;
        onTouchEnd?: (e: any) => void;
        onTouchMove?: (e: any) => void;
        onTouchCancel?: (e: any) => void;
        onKeyDown?: (e: any) => void;
        onKeyUp?: (e: any) => void;
        onFocus?: (e: any) => void;
        onBlur?: (e: any) => void;
        onChange?: (e: any) => void;
        onInput?: (e: any) => void;
        onBeforeInput?: (e: any) => void;
        onInvalid?: (e: any) => void;
        onReset?: (e: any) => void;
        onSubmit?: (e: any) => void;
        onSelect?: (e: any) => void;
        onCopy?: (e: any) => void;
        onCut?: (e: any) => void;
        onPaste?: (e: any) => void;
        onCompositionStart?: (e: any) => void;
        onCompositionUpdate?: (e: any) => void;
        onCompositionEnd?: (e: any) => void;
        onDrag?: (e: any) => void;
        onDragStart?: (e: any) => void;
        onDragEnd?: (e: any) => void;
        onDragEnter?: (e: any) => void;
        onDragLeave?: (e: any) => void;
        onDragOver?: (e: any) => void;
        onDrop?: (e: any) => void;
        onScroll?: (e: any) => void;
        onWheel?: (e: any) => void;
        onAnimationStart?: (e: any) => void;
        onAnimationEnd?: (e: any) => void;
        onAnimationIteration?: (e: any) => void;
        onTransitionEnd?: (e: any) => void;
        onLoad?: (e: any) => void;
        onError?: (e: any) => void;
        onAbort?: (e: any) => void;
        onToggle?: (e: any) => void;
        onBeforeToggle?: (e: any) => void;
        onCanPlay?: (e: any) => void;
        onCanPlayThrough?: (e: any) => void;
        onDurationChange?: (e: any) => void;
        onEmptied?: (e: any) => void;
        onEnded?: (e: any) => void;
        onLoadedData?: (e: any) => void;
        onLoadedMetadata?: (e: any) => void;
        onLoadStart?: (e: any) => void;
        onPause?: (e: any) => void;
        onPlay?: (e: any) => void;
        onPlaying?: (e: any) => void;
        onProgress?: (e: any) => void;
        onRateChange?: (e: any) => void;
        onSeeked?: (e: any) => void;
        onSeeking?: (e: any) => void;
        onStalled?: (e: any) => void;
        onSuspend?: (e: any) => void;
        onTimeUpdate?: (e: any) => void;
        onVolumeChange?: (e: any) => void;
        onWaiting?: (e: any) => void;
        [key: `data-${string}`]: unknown;
        [key: `aria-${string}`]: unknown;
    }

    Hierarchy (View Summary)

    Indexable

    • [key: `data-${string}`]: unknown

      Any data-* attribute is forwarded to the rendered element.

    • [key: `aria-${string}`]: unknown

      Any aria-* attribute is forwarded to the rendered element.

    Index
    label? value? defaultValue? min? max? step? name? disabled? tone? thumbTone? size? trackSize? thumbSize? thumbFill? round? valueDisplay? valuePrefix? valueSuffix? markers? trackClick? inverted? onValueChange? onValueCommit? className? style? children? id? title? slot? tabIndex? key? onClick? onDoubleClick? onAuxClick? onContextMenu? onMouseDown? onMouseUp? onMouseEnter? onMouseLeave? onMouseMove? onMouseOver? onMouseOut? onPointerDown? onPointerUp? onPointerMove? onPointerEnter? onPointerLeave? onPointerOver? onPointerOut? onPointerCancel? onGotPointerCapture? onLostPointerCapture? onTouchStart? onTouchEnd? onTouchMove? onTouchCancel? onKeyDown? onKeyUp? onFocus? onBlur? onChange? onInput? onBeforeInput? onInvalid? onReset? onSubmit? onSelect? onCopy? onCut? onPaste? onCompositionStart? onCompositionUpdate? onCompositionEnd? onDrag? onDragStart? onDragEnd? onDragEnter? onDragLeave? onDragOver? onDrop? onScroll? onWheel? onAnimationStart? onAnimationEnd? onAnimationIteration? onTransitionEnd? onLoad? onError? onAbort? onToggle? onBeforeToggle? onCanPlay? onCanPlayThrough? onDurationChange? onEmptied? onEnded? onLoadedData? onLoadedMetadata? onLoadStart? onPause? onPlay? onPlaying? onProgress? onRateChange? onSeeked? onSeeking? onStalled? onSuspend? onTimeUpdate? onVolumeChange? onWaiting?
    label?: ReactNode

    Visible field label, shown above the rail. A string supplies the slider's accessible name; give a rich label an explicit aria-label.

    value?: number | SliderRangeValue

    Controlled value. A pair of numbers selects a range. Update it from onValueChange.

    defaultValue?: number | SliderRangeValue

    Initial uncontrolled value.

    0
    min?: number

    Lowest permitted value.

    0
    max?: number

    Highest permitted value.

    100
    step?: number

    Smallest keyboard and drag increment.

    1
    name?: string

    Form field name. A range submits two values under this name.

    disabled?: boolean

    Disables pointer and keyboard interaction.

    tone?:
        | "neutral"
        | "brand"
        | "info"
        | "success"
        | "warning"
        | "critical"
        | string & {}

    Color of the filled rail. Pass a named tone or a literal CSS color for a one-off custom tone. The unfilled rail stays neutral.

    'neutral'
    thumbTone?:
        | "neutral"
        | "brand"
        | "info"
        | "success"
        | "warning"
        | "critical"
        | string & {}

    Color of the thumb stroke. Pass a named tone or a literal CSS color for a one-off custom tone. Omit it to keep the thumb neutral.

    'neutral'
    size?: "small" | "medium" | "large"

    Size variant. small=24px, medium=28px, large=32px tall.

    'medium'
    trackSize?: number | string

    Thickness of both rail segments. Numbers use pixels; strings are CSS lengths. Keep it no larger than the thumb diameter.

    2
    thumbSize?: number | string

    Diameter of the thumb. Numbers use pixels; strings are CSS lengths. Keep it at least as large as trackSize.

    16
    thumbFill?: boolean

    Fill the thumb with its resolved border color. This follows thumbTone and interactive states.

    false
    round?: boolean | number | string

    Fully round the rail and thumb. Pass a number (px) or CSS length string for a shared custom radius.

    valueDisplay?: "end" | "inline" | "thumb" | "none"

    Where the live value appears. end puts it at the right edge of the label row. inline renders Label: value. thumb keeps it above the thumb.

    'end'
    valuePrefix?: string

    Text inserted before the live numeric value, such as $.

    valueSuffix?: string

    Text inserted after the live numeric value, such as % or °C.

    markers?: SliderMarker[]

    Compact text labels positioned below the rail. They do not add dots or ticks to the rail.

    trackClick?: "drag-only" | "jump"

    Controls what happens when the rail is pressed. drag-only starts dragging from the current value. jump first moves to the pressed position.

    'drag-only'
    inverted?: boolean

    Fill the rail outside the selected value or range.

    onValueChange?: (event: any, attrs: SliderChangeAttrs<SliderValue>) => void

    Fires on every keyboard or pointer value change.

    onValueCommit?: (event: any, attrs: SliderChangeAttrs<SliderValue>) => void

    Fires after a drag ends and after each keyboard value change.

    className?: string

    CSS class on the component's root element (merged with the component's own classes). Use it directly for layout and positioning — grid/flex placement, margins, alignment — rather than wrapping the component in a <div>/<span>.

    style?: CSSProperties

    Inline styles on the component's root element. Set layout/positioning here (or via className) directly on the component instead of adding a wrapper.

    children?: ReactNode

    Child elements. When provided, replaces the component's default label/content.

    id?: string

    HTML id attribute.

    title?: string

    HTML title attribute — native browser tooltip on hover.

    slot?: string

    Assigns the element to a named <slot> of a parent web component (e.g. slot="header" inside a <Card>, slot="footer" inside a <Dialog>).

    tabIndex?: number

    Tab order. Set to -1 to skip the element when tabbing.

    key?: string | number | null

    React/Preact reconciliation key when rendered inside a list. Consumed by the JSX runtime (not forwarded as a DOM attribute).

    onClick?: (e: any) => void
    onDoubleClick?: (e: any) => void
    onAuxClick?: (e: any) => void
    onContextMenu?: (e: any) => void
    onMouseDown?: (e: any) => void
    onMouseUp?: (e: any) => void
    onMouseEnter?: (e: any) => void
    onMouseLeave?: (e: any) => void
    onMouseMove?: (e: any) => void
    onMouseOver?: (e: any) => void
    onMouseOut?: (e: any) => void
    onPointerDown?: (e: any) => void
    onPointerUp?: (e: any) => void
    onPointerMove?: (e: any) => void
    onPointerEnter?: (e: any) => void
    onPointerLeave?: (e: any) => void
    onPointerOver?: (e: any) => void
    onPointerOut?: (e: any) => void
    onPointerCancel?: (e: any) => void
    onGotPointerCapture?: (e: any) => void
    onLostPointerCapture?: (e: any) => void
    onTouchStart?: (e: any) => void
    onTouchEnd?: (e: any) => void
    onTouchMove?: (e: any) => void
    onTouchCancel?: (e: any) => void
    onKeyDown?: (e: any) => void
    onKeyUp?: (e: any) => void
    onFocus?: (e: any) => void
    onBlur?: (e: any) => void
    onChange?: (e: any) => void
    onInput?: (e: any) => void
    onBeforeInput?: (e: any) => void
    onInvalid?: (e: any) => void
    onReset?: (e: any) => void
    onSubmit?: (e: any) => void
    onSelect?: (e: any) => void
    onCopy?: (e: any) => void
    onCut?: (e: any) => void
    onPaste?: (e: any) => void
    onCompositionStart?: (e: any) => void
    onCompositionUpdate?: (e: any) => void
    onCompositionEnd?: (e: any) => void
    onDrag?: (e: any) => void
    onDragStart?: (e: any) => void
    onDragEnd?: (e: any) => void
    onDragEnter?: (e: any) => void
    onDragLeave?: (e: any) => void
    onDragOver?: (e: any) => void
    onDrop?: (e: any) => void
    onScroll?: (e: any) => void
    onWheel?: (e: any) => void
    onAnimationStart?: (e: any) => void
    onAnimationEnd?: (e: any) => void
    onAnimationIteration?: (e: any) => void
    onTransitionEnd?: (e: any) => void
    onLoad?: (e: any) => void
    onError?: (e: any) => void
    onAbort?: (e: any) => void
    onToggle?: (e: any) => void
    onBeforeToggle?: (e: any) => void
    onCanPlay?: (e: any) => void
    onCanPlayThrough?: (e: any) => void
    onDurationChange?: (e: any) => void
    onEmptied?: (e: any) => void
    onEnded?: (e: any) => void
    onLoadedData?: (e: any) => void
    onLoadedMetadata?: (e: any) => void
    onLoadStart?: (e: any) => void
    onPause?: (e: any) => void
    onPlay?: (e: any) => void
    onPlaying?: (e: any) => void
    onProgress?: (e: any) => void
    onRateChange?: (e: any) => void
    onSeeked?: (e: any) => void
    onSeeking?: (e: any) => void
    onStalled?: (e: any) => void
    onSuspend?: (e: any) => void
    onTimeUpdate?: (e: any) => void
    onVolumeChange?: (e: any) => void
    onWaiting?: (e: any) => void

    Settings
    Member Visibility

    On This Page
    Properties
    labelvaluedefaultValueminmaxstepnamedisabledtonethumbTonesizetrackSizethumbSizethumbFillroundvalueDisplayvaluePrefixvalueSuffixmarkerstrackClickinvertedonValueChangeonValueCommitclassNamestylechildrenidtitleslottabIndexkeyonClickonDoubleClickonAuxClickonContextMenuonMouseDownonMouseUponMouseEnteronMouseLeaveonMouseMoveonMouseOveronMouseOutonPointerDownonPointerUponPointerMoveonPointerEnteronPointerLeaveonPointerOveronPointerOutonPointerCancelonGotPointerCaptureonLostPointerCaptureonTouchStartonTouchEndonTouchMoveonTouchCancelonKeyDownonKeyUponFocusonBluronChangeonInputonBeforeInputonInvalidonResetonSubmitonSelectonCopyonCutonPasteonCompositionStartonCompositionUpdateonCompositionEndonDragonDragStartonDragEndonDragEnteronDragLeaveonDragOveronDroponScrollonWheelonAnimationStartonAnimationEndonAnimationIterationonTransitionEndonLoadonErroronAbortonToggleonBeforeToggleonCanPlayonCanPlayThroughonDurationChangeonEmptiedonEndedonLoadedDataonLoadedMetadataonLoadStartonPauseonPlayonPlayingonProgressonRateChangeonSeekedonSeekingonStalledonSuspendonTimeUpdateonVolumeChangeonWaiting