react-range-slider-input.d.ts

declare module 'react-range-slider-input' {
  import type { FC } from 'react'

  export type Orientation = 'horizontal' | 'vertical'
  export type Step = number | 'any'

  export type InputEvent = [number, number]
  export type InputEventHandler = (event: InputEvent) => void

  export interface ReactRangeSliderInputProps {
    /* @default null
         * Identifier string (id attribute value) to be passed to the range slider element.
         * */
    id?: string

    /* @default null
         * String of classes to be passed to the range slider element.
         * */
    className?: string

    /* @default 0
         * Number that specifies the lowest value in the range of permitted values.
         * Its value must be less than that of max.
         * */
    min?: number

    /* @default 100
         * Number that specifies the greatest value in the range of permitted values.
         * Its value must be greater than that of min.
         * */
    max?: number

    /* @default 1
         * Number that specifies the amount by which the slider value(s) will change upon user interaction.
         * Other than numbers, the value of step can be a string value of any.
         * */
    step?: number | 'any'

    /* @default [25, 75]
         * Array of two numbers that specify the default values of the lower and upper offsets of the range slider element respectively.
         * If set, the range slider will be rendered as an uncontrolled element. To render it as a controlled element, set the value property.
         * */
    defaultValue?: [number, number]

    /* @default []
         * Array of two numbers that specify the values of the lower and upper offsets of the range slider element respectively.
         * If set, the range slider will be rendered as a controlled element.
         * */
    value?: number[]

    /*
         * Function to be called when there is a change in the value(s) of range sliders upon user interaction.
         * */
    onInput?: InputEventHandler

    /*
         * Function to be called when the pointerdown event is triggered for any of the thumbs.
         * */
    onThumbDragStart?: () => void

    /*
         * Function to be called when the pointerup event is triggered for any of the thumbs.
         * */
    onThumbDragEnd?: () => void

    /*
         * Function to be called when the pointerdown event is triggered for the range.
         * */
    onRangeDragStart?: () => void

    /*
         * Function to be called when the pointerup event is triggered for the range.
         * */
    onRangeDragEnd?: () => void

    /* @default false
         * Boolean that specifies if the range slider element is disabled or not.
         * */
    disabled?: boolean

    /* @default false
         * Boolean that specifies if the range is slidable or not.
         * */
    rangeSlideDisabled?: boolean

    /* @default [false, false]
         * Array of two Booleans which specify if the lower and upper thumbs are disabled or not, respectively.
         * If only one Boolean value is passed instead of an array, the value will apply to both thumbs.
         * */
    thumbsDisabled?: [boolean, boolean]

    /* @default 'horizontal'
         * String that specifies the axis along which the user interaction is to be registered.
         * By default, the range slider element registers the user interaction along the X-axis.
         * It takes two different values: horizontal and vertical.
         * */
    orientation?: Orientation
  }

  const ReactRangeSliderInput: FC<ReactRangeSliderInputProps>

  export default ReactRangeSliderInput
}