@als-tp/als-react-ts-ui
Version:
A comprehensive React TypeScript UI component library built with Base UI by ALSInnovation
58 lines • 2.35 kB
TypeScript
/**
* ALSSlider - A customizable slider component
*
* @description
* A compound component slider built on Base UI Slider.
* Supports single values and range sliders with multiple thumbs.
*
* @example Basic usage
* ```tsx
* <ALSSlider.Root defaultValue={50}>
* <ALSSlider.Control>
* <ALSSlider.Track>
* <ALSSlider.Indicator />
* <ALSSlider.Thumb />
* </ALSSlider.Track>
* </ALSSlider.Control>
* </ALSSlider.Root>
* ```
*
* @example Range slider
* ```tsx
* <ALSSlider.Root defaultValue={[25, 75]}>
* <ALSSlider.Control>
* <ALSSlider.Track>
* <ALSSlider.Indicator />
* <ALSSlider.Thumb index={0} />
* <ALSSlider.Thumb index={1} />
* </ALSSlider.Track>
* </ALSSlider.Control>
* </ALSSlider.Root>
* ```
*
* @example With label and value display
* ```tsx
* <ALSSlider.Root defaultValue={50} showValue>
* <ALSSlider.Label>Volume</ALSSlider.Label>
* <ALSSlider.Value />
* <ALSSlider.Control>
* <ALSSlider.Track>
* <ALSSlider.Indicator />
* <ALSSlider.Thumb />
* </ALSSlider.Track>
* </ALSSlider.Control>
* </ALSSlider.Root>
* ```
*/
import type { ALSSliderRootProps, ALSSliderControlProps, ALSSliderTrackProps, ALSSliderIndicatorProps, ALSSliderThumbProps, ALSSliderValueProps, ALSSliderLabelProps, ALSSliderSize, ALSSliderVariant, ALSSliderOrientation } from "./ALSSlider";
export declare const ALSSlider: {
Root: import("react").FC<ALSSliderRootProps>;
Control: import("react").ForwardRefExoticComponent<ALSSliderControlProps & import("react").RefAttributes<HTMLDivElement>>;
Track: import("react").ForwardRefExoticComponent<ALSSliderTrackProps & import("react").RefAttributes<HTMLDivElement>>;
Indicator: import("react").ForwardRefExoticComponent<ALSSliderIndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
Thumb: import("react").ForwardRefExoticComponent<ALSSliderThumbProps & import("react").RefAttributes<HTMLDivElement>>;
Value: import("react").FC<ALSSliderValueProps>;
Label: import("react").FC<ALSSliderLabelProps>;
};
export type { ALSSliderRootProps, ALSSliderControlProps, ALSSliderTrackProps, ALSSliderIndicatorProps, ALSSliderThumbProps, ALSSliderValueProps, ALSSliderLabelProps, ALSSliderSize, ALSSliderVariant, ALSSliderOrientation, };
//# sourceMappingURL=index.d.ts.map