rc-slider

  • Version 9.7.5
  • Published
  • 183 kB
  • 5 dependencies
  • MIT license

Install

npm i rc-slider
yarn add rc-slider
pnpm add rc-slider

Overview

Slider UI component for React

Index

Variables

variable InternalSlider

const InternalSlider: CompoundedComponent;

    variable Range

    const Range: any;

      variable SliderTooltip

      const SliderTooltip: any;

        Functions

        function createSliderWithTooltip

        createSliderWithTooltip: <Props extends GenericSliderProps>(
        Component: any
        ) => {
        new (
        props:
        | (ComponentWrapperProps & Props)
        | Readonly<ComponentWrapperProps & Props>
        ): {
        state: { visibles: {} };
        handleTooltipVisibleChange: (index: any, visible: any) => void;
        handleWithTooltip: ({
        value,
        dragging,
        index,
        disabled,
        ...restProps
        }: {
        [x: string]: any;
        value: any;
        dragging: any;
        index: any;
        disabled: any;
        }) => any;
        render(): any;
        context: any;
        setState<K extends 'visibles'>(
        state:
        | ComponentWrapperState
        | ((
        prevState: Readonly<ComponentWrapperState>,
        props: Readonly<ComponentWrapperProps & Props>
        ) => ComponentWrapperState | Pick<ComponentWrapperState, K>)
        | Pick<ComponentWrapperState, K>,
        callback?: () => void
        ): void;
        forceUpdate(callback?: () => void): void;
        readonly props: Readonly<ComponentWrapperProps & Props> &
        Readonly<{ children?: React.ReactNode }>;
        refs: { [key: string]: any };
        componentDidMount?(): void;
        shouldComponentUpdate?(
        nextProps: Readonly<ComponentWrapperProps & Props>,
        nextState: Readonly<ComponentWrapperState>,
        nextContext: any
        ): boolean;
        componentWillUnmount?(): void;
        componentDidCatch?(error: Error, errorInfo: any): void;
        getSnapshotBeforeUpdate?(
        prevProps: Readonly<ComponentWrapperProps & Props>,
        prevState: Readonly<ComponentWrapperState>
        ): any;
        componentDidUpdate?(
        prevProps: Readonly<ComponentWrapperProps & Props>,
        prevState: Readonly<ComponentWrapperState>,
        snapshot?: any
        ): void;
        componentWillMount?(): void;
        UNSAFE_componentWillMount?(): void;
        componentWillReceiveProps?(
        nextProps: Readonly<ComponentWrapperProps & Props>,
        nextContext: any
        ): void;
        UNSAFE_componentWillReceiveProps?(
        nextProps: Readonly<ComponentWrapperProps & Props>,
        nextContext: any
        ): void;
        componentWillUpdate?(
        nextProps: Readonly<ComponentWrapperProps & Props>,
        nextState: Readonly<ComponentWrapperState>,
        nextContext: any
        ): void;
        UNSAFE_componentWillUpdate?(
        nextProps: Readonly<ComponentWrapperProps & Props>,
        nextState: Readonly<ComponentWrapperState>,
        nextContext: any
        ): void;
        };
        new (props: ComponentWrapperProps & Props, context: any): {
        state: { visibles: {} };
        handleTooltipVisibleChange: (index: any, visible: any) => void;
        handleWithTooltip: ({
        value,
        dragging,
        index,
        disabled,
        ...restProps
        }: {
        [x: string]: any;
        value: any;
        dragging: any;
        index: any;
        disabled: any;
        }) => any;
        render(): any;
        context: any;
        setState<K extends 'visibles'>(
        state:
        | ComponentWrapperState
        | ((
        prevState: Readonly<ComponentWrapperState>,
        props: Readonly<ComponentWrapperProps & Props>
        ) => ComponentWrapperState | Pick<ComponentWrapperState, K>)
        | Pick<ComponentWrapperState, K>,
        callback?: () => void
        ): void;
        forceUpdate(callback?: () => void): void;
        readonly props: Readonly<ComponentWrapperProps & Props> &
        Readonly<{ children?: React.ReactNode }>;
        refs: { [key: string]: any };
        componentDidMount?(): void;
        shouldComponentUpdate?(
        nextProps: Readonly<ComponentWrapperProps & Props>,
        nextState: Readonly<ComponentWrapperState>,
        nextContext: any
        ): boolean;
        componentWillUnmount?(): void;
        componentDidCatch?(error: Error, errorInfo: any): void;
        getSnapshotBeforeUpdate?(
        prevProps: Readonly<ComponentWrapperProps & Props>,
        prevState: Readonly<ComponentWrapperState>
        ): any;
        componentDidUpdate?(
        prevProps: Readonly<ComponentWrapperProps & Props>,
        prevState: Readonly<ComponentWrapperState>,
        snapshot?: any
        ): void;
        componentWillMount?(): void;
        UNSAFE_componentWillMount?(): void;
        componentWillReceiveProps?(
        nextProps: Readonly<ComponentWrapperProps & Props>,
        nextContext: any
        ): void;
        UNSAFE_componentWillReceiveProps?(
        nextProps: Readonly<ComponentWrapperProps & Props>,
        nextContext: any
        ): void;
        componentWillUpdate?(
        nextProps: Readonly<ComponentWrapperProps & Props>,
        nextState: Readonly<ComponentWrapperState>,
        nextContext: any
        ): void;
        UNSAFE_componentWillUpdate?(
        nextProps: Readonly<ComponentWrapperProps & Props>,
        nextState: Readonly<ComponentWrapperState>,
        nextContext: any
        ): void;
        };
        defaultProps: {
        tipFormatter(value: number): number;
        handleStyle: {}[];
        tipProps: {};
        getTooltipContainer: (node: any) => any;
        };
        contextType?: any;
        };

          Classes

          class Handle

          class Handle extends React.Component<HandleProps> {}

            property handle

            handle: HTMLElement;

              property handleBlur

              handleBlur: () => void;

                property handleKeyDown

                handleKeyDown: () => void;

                  property handleMouseDown

                  handleMouseDown: (e: any) => void;

                    property handleMouseUp

                    handleMouseUp: () => void;

                      property onMouseUpListener

                      onMouseUpListener: { remove: () => void };

                        property setHandleRef

                        setHandleRef: (node: any) => void;

                          property state

                          state: { clickFocused: boolean };

                            method blur

                            blur: () => void;

                              method clickFocus

                              clickFocus: () => void;

                                method componentDidMount

                                componentDidMount: () => void;

                                  method componentWillUnmount

                                  componentWillUnmount: () => void;

                                    method focus

                                    focus: () => void;

                                      method render

                                      render: () => any;

                                        method setClickFocus

                                        setClickFocus: (focused: any) => void;

                                          Interfaces

                                          interface HandleProps

                                          interface HandleProps {}

                                            property ariaLabel

                                            ariaLabel?: string;

                                              property ariaLabelledBy

                                              ariaLabelledBy?: string;

                                                property ariaValueTextFormatter

                                                ariaValueTextFormatter?: (val: number) => string;

                                                  property className

                                                  className?: string;

                                                    property disabled

                                                    disabled?: boolean;

                                                      property max

                                                      max?: number;

                                                        property min

                                                        min?: number;

                                                          property offset

                                                          offset?: number;

                                                            property onMouseEnter

                                                            onMouseEnter?: React.MouseEventHandler;

                                                              property onMouseLeave

                                                              onMouseLeave?: React.MouseEventHandler;

                                                                property prefixCls

                                                                prefixCls?: string;

                                                                  property reverse

                                                                  reverse?: boolean;

                                                                    property style

                                                                    style?: React.CSSProperties;

                                                                      property tabIndex

                                                                      tabIndex?: number;

                                                                        property value

                                                                        value?: number;

                                                                          property vertical

                                                                          vertical?: boolean;

                                                                            interface RangeProps

                                                                            interface RangeProps extends GenericSliderProps {}

                                                                              property allowCross

                                                                              allowCross?: boolean;

                                                                                property ariaLabelGroupForHandles

                                                                                ariaLabelGroupForHandles?: string | string[];

                                                                                  property ariaLabelledByGroupForHandles

                                                                                  ariaLabelledByGroupForHandles?: string | string[];

                                                                                    property ariaValueTextFormatterGroupForHandles

                                                                                    ariaValueTextFormatterGroupForHandles?: ((value: number) => string)[];

                                                                                      property count

                                                                                      count?: number;

                                                                                        property defaultValue

                                                                                        defaultValue?: number[];

                                                                                          property disabled

                                                                                          disabled?: boolean;

                                                                                            property draggableTrack

                                                                                            draggableTrack?: boolean;

                                                                                              property handle

                                                                                              handle?: SliderProps['handle'];

                                                                                                property handleStyle

                                                                                                handleStyle?: React.CSSProperties[];

                                                                                                  property included

                                                                                                  included?: boolean;

                                                                                                    property marks

                                                                                                    marks?: Record<
                                                                                                    number,
                                                                                                    | React.ReactNode
                                                                                                    | {
                                                                                                    style?: React.CSSProperties;
                                                                                                    label?: string;
                                                                                                    }
                                                                                                    >;

                                                                                                      property max

                                                                                                      max?: number;

                                                                                                        property min

                                                                                                        min?: number;

                                                                                                          property onAfterChange

                                                                                                          onAfterChange?: (value: number[]) => void;

                                                                                                            property onBeforeChange

                                                                                                            onBeforeChange?: (value: number[]) => void;

                                                                                                              property onChange

                                                                                                              onChange?: (value: number[]) => void;

                                                                                                                property prefixCls

                                                                                                                prefixCls?: string;

                                                                                                                  property pushable

                                                                                                                  pushable?: boolean | number;

                                                                                                                    property reverse

                                                                                                                    reverse?: boolean;

                                                                                                                      property step

                                                                                                                      step?: number | null;

                                                                                                                        property tabIndex

                                                                                                                        tabIndex?: number | number[];

                                                                                                                          property threshold

                                                                                                                          threshold?: number;

                                                                                                                            property trackStyle

                                                                                                                            trackStyle?: React.CSSProperties[];

                                                                                                                              property value

                                                                                                                              value?: number[];

                                                                                                                                property vertical

                                                                                                                                vertical?: boolean;

                                                                                                                                  interface SliderProps

                                                                                                                                  interface SliderProps extends GenericSliderProps {}

                                                                                                                                    property ariaLabelForHandle

                                                                                                                                    ariaLabelForHandle?: string;

                                                                                                                                      property ariaLabelledByForHandle

                                                                                                                                      ariaLabelledByForHandle?: string;

                                                                                                                                        property ariaValueTextFormatterForHandle

                                                                                                                                        ariaValueTextFormatterForHandle?: (value: number) => string;

                                                                                                                                          property defaultValue

                                                                                                                                          defaultValue?: number;

                                                                                                                                            property disabled

                                                                                                                                            disabled?: boolean;

                                                                                                                                              property handle

                                                                                                                                              handle?: (props: {
                                                                                                                                              className: string;
                                                                                                                                              prefixCls?: string;
                                                                                                                                              vertical?: boolean;
                                                                                                                                              offset: number;
                                                                                                                                              value: number;
                                                                                                                                              dragging?: boolean;
                                                                                                                                              disabled?: boolean;
                                                                                                                                              min?: number;
                                                                                                                                              max?: number;
                                                                                                                                              reverse?: boolean;
                                                                                                                                              index: number;
                                                                                                                                              tabIndex?: number;
                                                                                                                                              ariaLabel: string;
                                                                                                                                              ariaLabelledBy: string;
                                                                                                                                              ariaValueTextFormatter?: (value: number) => string;
                                                                                                                                              style?: React.CSSProperties;
                                                                                                                                              ref?: React.Ref<any>;
                                                                                                                                              }) => React.ReactElement;

                                                                                                                                                property handleStyle

                                                                                                                                                handleStyle?: React.CSSProperties;

                                                                                                                                                  property included

                                                                                                                                                  included?: boolean;

                                                                                                                                                    property max

                                                                                                                                                    max?: number;

                                                                                                                                                      property min

                                                                                                                                                      min?: number;

                                                                                                                                                        property minimumTrackStyle

                                                                                                                                                        minimumTrackStyle?: React.CSSProperties;

                                                                                                                                                          property onAfterChange

                                                                                                                                                          onAfterChange?: (value: number) => void;

                                                                                                                                                            property onBeforeChange

                                                                                                                                                            onBeforeChange?: (value: number) => void;

                                                                                                                                                              property onChange

                                                                                                                                                              onChange?: (value: number) => void;

                                                                                                                                                                property prefixCls

                                                                                                                                                                prefixCls?: string;

                                                                                                                                                                  property reverse

                                                                                                                                                                  reverse?: boolean;

                                                                                                                                                                    property startPoint

                                                                                                                                                                    startPoint?: number;

                                                                                                                                                                      property step

                                                                                                                                                                      step?: number | null;

                                                                                                                                                                        property tabIndex

                                                                                                                                                                        tabIndex?: number;

                                                                                                                                                                          property trackStyle

                                                                                                                                                                          trackStyle?: React.CSSProperties;

                                                                                                                                                                            property value

                                                                                                                                                                            value?: number;

                                                                                                                                                                              property vertical

                                                                                                                                                                              vertical?: boolean;

                                                                                                                                                                                Package Files (6)

                                                                                                                                                                                Dependencies (5)

                                                                                                                                                                                Dev Dependencies (21)

                                                                                                                                                                                Peer Dependencies (2)

                                                                                                                                                                                Badge

                                                                                                                                                                                To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                                                                                                                You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/rc-slider.

                                                                                                                                                                                • Markdown
                                                                                                                                                                                  [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/rc-slider)
                                                                                                                                                                                • HTML
                                                                                                                                                                                  <a href="https://www.jsdocs.io/package/rc-slider"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>