import React from 'react';
import { Range } from 'react-input-range';
import Div from '../Element/Div/Div';
import { CreateProps } from '../../types/utils/CreateProps';
export interface InputRangeClassNamesShape {
    activeTrack: string;
    disabledInputRange: string;
    inputRange: string;
    labelContainer: string;
    maxLabel: string;
    minLabel: string;
    slider: string;
    sliderContainer: string;
    track: string;
    valueLabel: string;
}
declare type RangeSliderProps = CreateProps<{
    /** Disabled range slider. Defaults to false. */
    disabled?: boolean;
    /** Minimun (starting) range value */
    minRangeValue: number;
    /** Maximum (ending) range value */
    maxRangeValue: number;
    /** Value (state) of range slider */
    value: Range | number;
    /** Handler function for changing value */
    onChange: (value: number | Range) => void;
    /** Whenever your user starts interacting with your component(i.e.: onMouseDown, or onTouchStart), this function gets called. */
    onChangeStart?: (value: number | Range) => void;
    /** Every mouse / touch event can trigger multiple updates, therefore causing onChange callback to fire multiple times. On the other hand, onChangeComplete callback only gets called when the user stops dragging. */
    onChangeComplete?: (value: number | Range) => void;
    /** Amount of increment/decrement */
    interval?: number;
    /** By default, value labels are displayed as plain numbers. If you want to change the display, you can do so by passing in a function. The function can return something different, i.e.: append a unit, reduce the precision of a number.
  For example: (value) => `${value} €` */
    formatLabel?: (value: number | Range) => string;
    /** Set to true to allow 2-value slider minimum (value.min) and maximum (value.max) to be equal. */
    allowSameValues?: boolean;
    /** Set aria - labelledby attribute to your component. */
    ariaLabelledby?: string;
    /** Set aria - controls attribute to your component. */
    ariaControls?: string;
    /** If this property is set to true, you can drag the entire track definded by range values. Otherwise clicking the track changes the closest value. */
    draggableTrack?: boolean;
    /** If set, creates input element with given name for form usage. */
    name?: string;
    /** If set, overrides default InputRange component classNames. See RangeSlider.module.scss for the default styles. */
    InputRangeClassNames?: InputRangeClassNamesShape;
}, typeof Div, 'padding'>;
declare const RangeSlider: React.FunctionComponent<RangeSliderProps>;
export default RangeSlider;