react-slider.api.md

API Report File for "@fluentui/react-slider"

Do not edit this file. It is a report generated by API Extractor.

import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { EventData } from '@fluentui/react-utilities';
import type { EventHandler } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';

// @public
export const RangeSlider: ForwardRefComponent<RangeSliderProps>;

// @public (undocumented)
export const rangeSliderClassNames: SlotClassNames<RangeSliderSlots>;

// @public (undocumented)
export const rangeSliderCSSVars: {
    rangeSliderDirectionVar: string;
    rangeSliderInnerThumbRadiusVar: string;
    rangeSliderLowerProgressVar: string;
    rangeSliderUpperProgressVar: string;
    rangeSliderProgressColorVar: string;
    rangeSliderRailSizeVar: string;
    rangeSliderRailColorVar: string;
    rangeSliderStepsPercentVar: string;
    rangeSliderThumbColorVar: string;
    rangeSliderThumbSizeVar: string;
};

// @public (undocumented)
export type RangeSliderOnChangeData = EventData<'change', React_2.ChangeEvent<HTMLInputElement>> & {
    value: RangeSliderValue;
};

// @public (undocumented)
export type RangeSliderProps = Omit<ComponentProps<Partial<RangeSliderSlots>, 'startInput' | 'endInput'>, 'defaultValue' | 'onChange' | 'size' | 'value'> & {
    defaultValue?: RangeSliderValue;
    disabled?: boolean;
    max?: number;
    min?: number;
    size?: 'small' | 'medium';
    step?: number;
    value?: RangeSliderValue;
    vertical?: boolean;
    onChange?: EventHandler<RangeSliderOnChangeData>;
};

// @public (undocumented)
export type RangeSliderSlots = {
    root: NonNullable<Slot<'div'>>;
    rail: NonNullable<Slot<'div'>>;
    startThumb: NonNullable<Slot<'div'>>;
    endThumb: NonNullable<Slot<'div'>>;
    startInput: NonNullable<Slot<'input'>> & {
        orient?: 'horizontal' | 'vertical';
    };
    endInput: NonNullable<Slot<'input'>> & {
        orient?: 'horizontal' | 'vertical';
    };
};

// @public (undocumented)
export type RangeSliderState = ComponentState<RangeSliderSlots> & Pick<RangeSliderProps, 'disabled' | 'size' | 'vertical'> & {
    value: RangeSliderValue;
    activeThumb: 'start' | 'end';
};

// @public (undocumented)
export type RangeSliderValue = {
    start: number;
    end: number;
};

// @public
export const renderRangeSlider_unstable: (state: RangeSliderState) => JSXElement;

// @public
export const renderSlider_unstable: (state: SliderState) => JSXElement;

// @public
export const Slider: ForwardRefComponent<SliderProps>;

// @public (undocumented)
export const sliderClassNames: SlotClassNames<SliderSlots>;

// @public (undocumented)
export const sliderCSSVars: {
    sliderDirectionVar: string;
    sliderInnerThumbRadiusVar: string;
    sliderProgressVar: string;
    sliderProgressColorVar: string;
    sliderRailSizeVar: string;
    sliderRailColorVar: string;
    sliderStepsPercentVar: string;
    sliderThumbColorVar: string;
    sliderThumbSizeVar: string;
};

// @public (undocumented)
export type SliderOnChangeData = {
    value: number;
};

// @public (undocumented)
export type SliderProps = Omit<ComponentProps<Partial<SliderSlots>, 'input'>, 'defaultValue' | 'onChange' | 'size' | 'value'> & {
    defaultValue?: number;
    disabled?: boolean;
    max?: number;
    min?: number;
    size?: 'small' | 'medium';
    step?: number;
    value?: number;
    vertical?: boolean;
    onChange?: (ev: React_2.ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => void;
};

// @public (undocumented)
export type SliderSlots = {
    root: NonNullable<Slot<'div'>>;
    rail: NonNullable<Slot<'div'>>;
    thumb: NonNullable<Slot<'div'>>;
    input: NonNullable<Slot<'input'>> & {
        orient?: 'horizontal' | 'vertical';
    };
};

// @public (undocumented)
export type SliderState = ComponentState<SliderSlots> & Pick<SliderProps, 'disabled' | 'size' | 'vertical'>;

// @public
export const useRangeSlider_unstable: (props: RangeSliderProps, ref: React_2.Ref<HTMLDivElement>) => RangeSliderState;

// @public (undocumented)
export const useRangeSliderState_unstable: (state: RangeSliderState, props: RangeSliderProps) => RangeSliderState;

// @public (undocumented)
export const useRangeSliderStyles_unstable: (state: RangeSliderState) => RangeSliderState;

// @public (undocumented)
export const useSlider_unstable: (props: SliderProps, ref: React_2.Ref<HTMLInputElement>) => SliderState;

// @public (undocumented)
export const useSliderState_unstable: (state: SliderState, props: SliderProps) => SliderState;

// @public
export const useSliderStyles_unstable: (state: SliderState) => SliderState;

// (No @packageDocumentation comment for this package)