import { Accessibility, SliderBehaviorProps } from '@fluentui/accessibility'; import { ComponentWithAs } from '@fluentui/react-bindings'; import * as React from 'react'; import { ChildrenComponentProps, UIComponentProps } from '../../utils'; import { ComponentEventHandler, ShorthandValue, FluentComponentStaticProps } from '../../types'; import { SupportedIntrinsicInputProps } from '../../utils/htmlPropsUtils'; import { BoxProps } from '../Box/Box'; export interface SliderSlotClassNames { input: string; inputWrapper: string; rail: string; thumb: string; track: string; } export interface SliderProps extends UIComponentProps, ChildrenComponentProps, Omit { /** Accessibility behavior if overridden by the user. */ accessibility?: Accessibility; /** The default value of the slider. */ defaultValue?: string | number; /** A slider can be read-only and unable to change states. */ disabled?: SupportedIntrinsicInputProps['disabled']; /** A slider can take the width of its container. */ fluid?: boolean; /** * Callback that creates custom accessibility message a screen reader narrates when the value changes. * @param props - Slider props. */ getA11yValueMessageOnChange?: (props: SliderProps) => string; /** Shorthand for the input component. */ input?: ShorthandValue; /** Ref for input DOM node. */ inputRef?: React.Ref; /** The maximum value of the slider. */ max?: SupportedIntrinsicInputProps['max']; /** The minimum value of the slider. */ min?: SupportedIntrinsicInputProps['min']; /** * Called after item checked state is changed. * @param event - React's original SyntheticEvent. * @param data - All props. */ onChange?: ComponentEventHandler; /** * A number that specifies the granularity that the value must adhere to, or the special value 'any'. * A string value of any means that no stepping is implied, and any value is allowed * (barring other constraints, such as min and max). */ step?: SupportedIntrinsicInputProps['step']; /** The value of the slider. */ value?: string | number; /** A slider can be displayed vertically. */ vertical?: boolean; } export declare type SliderStylesProps = Pick; export declare const sliderClassName = "ui-slider"; export declare const sliderSlotClassNames: SliderSlotClassNames; /** * A Slider represents an input that allows user to choose a value from within a specific range. * * @accessibility * Implements [ARIA Slider](https://www.w3.org/TR/wai-aria-practices-1.1/#slider) design pattern. * @accessibilityIssues * [Slider - JAWS narrates slider value twice when using PageUp / PageDown](https://github.com/FreedomScientific/VFO-standards-support/issues/220) * [Slider - JAWS narrates current and new value in vertical slider](https://github.com/FreedomScientific/VFO-standards-support/issues/219) */ export declare const Slider: ComponentWithAs<'input', SliderProps> & FluentComponentStaticProps;