import React from "react"; import Foundation, { HandledProps } from "@microsoft/fast-components-foundation-react"; import { SliderClassNameContract } from "@microsoft/fast-components-class-name-contracts-base"; import { Direction } from "@microsoft/fast-web-utilities"; import { SliderContext, SliderContextType } from "./slider-context"; import { SliderHandledProps, SliderProps, SliderUnhandledProps } from "./slider.props"; export declare enum SliderThumb { upperThumb = "upperThumb", lowerThumb = "lowerThumb" } export interface SliderState { upperValue: number; lowerValue: number; isMouseDragging: boolean; isTouchDragging: boolean; dragValue: number; activeThumb: SliderThumb; isIncrementing: boolean; incrementDirection: number; usePageStep: boolean; direction: Direction | null; } declare class Slider extends Foundation { static displayName: string; static defaultProps: Partial; private static baseIncrementDelay; private static minIncrementDelay; private static incrementAcceleration; private static rolePropName; private static DirectionAttributeName; protected handledProps: HandledProps; private rootElement; private sliderTrackElement; private rangeInPixels; private barMinPixel; private incrementTimer; private lastIncrementDelay; /** * constructor */ constructor(props: SliderProps); /** * React lifecycle methods */ componentDidMount(): void; componentWillUnmount(): void; componentDidUpdate(prevProps: SliderProps): void; /** * Renders the component */ render(): React.ReactElement; /** * Generates class names */ protected generateClassNames(): string; /** * Renders the internals of the component */ private renderSliderInternals; /** * Updates values when mode is switched in props */ private updateValuesForModeSwitch; /** * Constrains a value to be within the provided constraint range and step */ private getConstrainedValue; /** * Maps the default thumb managed classes to the appropriate slider managed classes */ private getThumbManagedClasses; /** * Renders the appropriate thumb */ private renderThumb; /** * Renders the default thumb */ private renderDefaultThumb; /** * Renders a hidden input element which can interact with a * form hosting this component */ private renderHiddenInputElement; /** * This exists only to suppress a build warning */ private onInputValueChange; /** * Determines whether a particular thumb should render in the current mode */ private shouldRenderThumb; /** * Handles track clicks */ private handleTrackMouseDown; /** * Handles track clicks when there are multiple thumbs */ private handleMultiThumbTrackClick; /** * updates the direction in state if necessary */ private updateDirection; /** * gets the current direction */ private getDirection; /** * Measures the slider dimensions and stores them */ private updateSliderDimensions; /** * Start timed incrementing from */ private startIncrementing; /** * Increments the value by one step (or pageStep) * when step is set to 0 we increment based on the current pixel width * of the component */ private incrementValue; /** * Increment timer tick */ private incrementTimerExpired; /** * Stop incrementing */ private stopIncrementing; /** * Converts a pixel coordinate on the track to a percent of the track's range */ private convertPixelToPercent; /** * Handles thumb key events */ private handleUpperThumbKeyDown; private handleLowerThumbKeyDown; private handleThumbKeydown; /** * sets the active thumb to its minimum value */ private setMinValue; /** * sets the active thumb to it's maximum value */ private setMaxValue; /** * Handles thumb clicks */ private handleUpperThumbMouseDown; private handleLowerThumbMouseDown; private handleThumbMouseDown; /** * Handle mouse moves during a thumb drag operation */ private handleMouseMove; /** * Get dragvalue from mouse event or touch */ private getDragValue; /** * Handles touch dragging */ private handleUpperThumbTouchStart; private handleLowerThumbTouchStart; private handleThumbTouchStart; /** * Returns first valid touch found in a touch event */ private getValidTouch; /** * Handle touch moves during a thumb drag operation */ private handleTouchMove; /** * Handle touch end */ private handleTouchEnd; /** * Updates the current drag value */ private updateDragValue; /** * Gets the range of values the active thumb is actually allowed to traverse */ private getConstrainedRange; /** * Converts a single number value to a SliderRange based on current mode */ private valueAsRange; /** * Apply value changes to state, only place this should happen outside of constructor and ComponentDidUpdate */ private updateValues; /** * Invokes the value change event and formats params based on current mode */ private invokeValueChange; /** * Handle a window mouse up during a drag operation */ private handleWindowMouseUp; /** * Handle window key up during an incrementing operation */ private handleWindowKeyUp; /** * Ends a thumb drag operation */ private stopDragging; /** * Ends a thumb touch drag operation */ private stopTouchDragging; /** * Ends active drag/increment operations */ private suspendActiveOperations; /** * Ensures a value falls within the provided range */ private constrainToRange; /** * Ensures a value is an even multiple of the slider step increment */ private constrainToStep; /** * Converts value to a percent of slider range */ private valueAsPercent; /** * Converts a percent value to the equivalent value on the bar range */ private percentAsValue; /** * Checks if the component is busy with an active operation or disabled */ private isBusyOrDisabled; } export default Slider; export * from "./slider.props"; export { SliderClassNameContract, SliderContext, SliderContextType };