Slider

Exports

@mbsw/ui에서 가져올 수 있는 항목입니다.

Slider

Props

컴포넌트별 주요 속성입니다. 조건부 속성의 조합과 공통 HTML, Radix 속성은 아래 전체 타입에서 확인하세요.

Slider

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

Type reference

전체 타입 보기

속성 조합과 상속 속성을 포함한 TypeScript 선언입니다.

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>>;