import React from 'react'; import { DefaultProps, FlowindColor, FlowindSize } from '../../../styles'; import { FlowindTransition } from '../../transition'; import { MarksStylesNames } from '../marks/marks'; import { SliderRootStylesNames } from '../slider-root/slider-root'; import { ThumbStylesNames } from '../thumb/thumb'; import { TrackStylesNames } from '../track/track'; export type RangeSliderStylesNames = SliderRootStylesNames | ThumbStylesNames | TrackStylesNames | MarksStylesNames; type Value = [number, number]; export interface RangeSliderProps extends DefaultProps, Omit, 'value' | 'onChange' | 'defaultValue'> { variant?: string; /** Color from theme.colors */ color?: FlowindColor; /** Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default */ radius?: FlowindSize; /** Predefined track and thumb size, number to set sizes */ size?: FlowindSize; /** Minimal possible value */ min?: number; /** Maximum possible value */ max?: number; /** Minimal range interval */ minRange?: number; /** Maximum range interval */ maxRange?: number; /** Number by which value will be incremented/decremented with thumb drag and arrows */ step?: number; /** Amount of digits after the decimal point */ precision?: number; /** Current value for controlled slider */ value?: Value; /** Default value for uncontrolled slider */ defaultValue?: Value; /** Called each time value changes */ onChange?: (value: Value) => void; /** Called when user stops dragging slider or changes value with arrows */ onChangeEnd?: (value: Value) => void; /** Hidden input name, use with uncontrolled variant */ name?: string; /** Marks which will be placed on the track */ marks?: { value: number; label?: React.ReactNode; }[]; /** Function to generate label or any react node to render instead, set to null to disable label */ label?: React.ReactNode | ((value: number) => React.ReactNode); /** Label appear/disappear transition */ labelTransition?: FlowindTransition; /** Label appear/disappear transition duration in ms */ labelTransitionDuration?: number; /** Label appear/disappear transition timing function, defaults to theme.transitionRimingFunction */ labelTransitionTimingFunction?: string; /** If true label will be not be hidden when user stops dragging */ labelAlwaysOn?: boolean; /** First thumb aria-label */ thumbFromLabel?: string; /** Second thumb aria-label */ thumbToLabel?: string; /**If true slider label will appear on hover */ showLabelOnHover?: boolean; /** Thumbs children, can be used to add icons */ thumbChildren?: React.ReactNode; /** Disables slider */ disabled?: boolean; /** Thumb width and height */ thumbSize?: number; /** A transformation function, to change the scale of the slider */ scale?: (value: number) => number; /** Allows the track to be inverted */ inverted?: boolean; } export declare const RangeSlider: React.ForwardRefExoticComponent>; export {};