Slider

Exports

Import these components from @mbsw/ui.

Slider

Props

The tables list common props for each component. See the full types for supported prop combinations and inherited HTML and Radix props.

Slider

Slider props
Prop	Type	Requirement
`value` One controlled value. Values are clamped and snapped relative to min.	`number`	Optional
`defaultValue` Initial uncontrolled value; defaults to min.	`number`	Optional
`onValueChange` Live value proposals. Persist costly changes in onValueCommit instead.	`((value: number) => void)`	Optional
`onValueCommit` Changed pointer release or keyboard operation; cancellation does not commit.	`((value: number) => void)`	Optional
`asChild`	`boolean`	Conditional
`children`	`ReactNode \| ReactElement<{ children?: ReactNode; }, string \| JSXElementConstructor<any>>`	Conditional

Type reference

Show full types

Full TypeScript definitions, including prop combinations and inherited props.

import { type ComponentPropsWithoutRef, type ReactElement, type ReactNode } from 'react';

import { Slider as SliderPrimitive } from 'radix-ui';

type DataAttributes = {
    [key: `data-${string}`]: boolean | number | string | undefined;
};

type OwnedProps = 'aria-orientation' | 'aria-valuemax' | 'aria-valuemin' | 'aria-valuenow' | 'asChild' | 'children' | 'color' | 'defaultValue' | 'inverted' | 'minStepsBetweenThumbs' | 'onValueChange' | 'onValueCommit' | 'orientation' | 'role' | 'tabIndex' | 'value';

type SliderBaseProps = Omit<ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, OwnedProps> & DataAttributes & {
    /** One controlled value. Values are clamped and snapped relative to min. */
    value?: number;
    /** Initial uncontrolled value; defaults to min. */
    defaultValue?: number;
    /** Live value proposals. Persist costly changes in onValueCommit instead. */
    onValueChange?: (value: number) => void;
    /** Changed pointer release or keyboard operation; cancellation does not commit. */
    onValueCommit?: (value: number) => void;
};

export type SliderProps = SliderBaseProps & ({
    asChild?: false;
    children?: ReactNode;
} | {
    asChild: true;
    children: ReactElement<{
        children?: ReactNode;
    }>;
});

export declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLSpanElement>>;