@coreui/react-pro/dist/esm/components/range-slider/CRangeSlider.d.ts

UI Components Library for React.js

import React, { HTMLAttributes, ReactNode } from 'react';
import { type Label } from './types';
export interface CRangeSliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
    /**
     * Customize the styling of your React Range Slider by adding a custom `className`.
     * This allows you to apply additional CSS classes for enhanced design flexibility and integration with your existing stylesheets.
     */
    className?: string;
    /**
     * Enable or disable clickable labels in the React Range Slider.
     * When set to `true`, users can click on labels to adjust the slider's value directly, enhancing interactivity and user experience.
     */
    clickableLabels?: boolean;
    /**
     * Control the interactive state of the React Range Slider with the `disabled` prop.
     * Setting it to `true` will disable all slider functionalities, preventing user interaction and visually indicating a non-interactive state.
     */
    disabled?: boolean;
    /**
     * Define the minimum distance between slider handles using the `distance` prop in the React Range Slider.
     * This ensures that the handles maintain a specified separation, preventing overlap and maintaining clear value distinctions.
     */
    distance?: number;
    /**
     * Add descriptive labels to your React Range Slider by providing an array of `labels`.
     * These labels enhance the slider's usability by clearly indicating key values and providing contextual information to users.
     */
    labels?: Label[];
    /**
     * Specify the maximum value for the React Range Slider with the `max` prop.
     * This determines the upper limit of the slider's range, enabling precise control over the highest selectable value.
     */
    max?: number;
    /**
     * Set the minimum value for the React Range Slider using the `min` prop.
     * This defines the lower bound of the slider's range, allowing you to control the starting point of user selection.
     */
    min?: number;
    /**
     * Assign a `name` to the React Range Slider for form integration.
     * Whether using a single string or an array of strings, this prop ensures that the slider's values are correctly identified when submitting forms.
     */
    name?: string | string[];
    /**
     * Control the granularity of the React Range Slider by setting the `step` prop.
     * This defines the increment intervals between selectable values, allowing for precise adjustments based on your application's requirements.
     */
    step?: number;
    /**
     * Handle value changes in the React Range Slider by utilizing the `onChange` callback.
     * This function is triggered whenever the slider's value updates, enabling you to manage state and respond to user interactions effectively.
     */
    onChange?: (value: number[]) => void;
    /**
     * Toggle the visibility of tooltips in the React Range Slider with the `tooltips` prop.
     * When enabled, tooltips display the current value of the slider handles, providing real-time feedback to users.
     */
    tooltips?: boolean;
    /**
     * Customize the display format of tooltips in the React Range Slider using the `tooltipsFormat` function.
     * This allows you to format the tooltip values according to your specific requirements, enhancing the clarity and presentation of information.
     */
    tooltipsFormat?: (value: number) => ReactNode;
    /**
     * Controls the visual representation of the slider's track. When set to `'fill'`, the track is dynamically filled based on the slider's value(s). Setting it to `false` disables the filled track.
     */
    track?: 'fill' | boolean;
    /**
     * Set the current value(s) of the React Range Slider using the `value` prop.
     * Whether you're using a single value or an array for multi-handle sliders, this prop controls the slider's position and ensures it reflects the desired state.
     */
    value?: number | number[];
    /**
     * Orient the React Range Slider vertically by setting the `vertical` prop to `true`.
     * This changes the slider's layout from horizontal to vertical, providing a different aesthetic and fitting various UI designs.
     */
    vertical?: boolean;
}
export declare const CRangeSlider: React.ForwardRefExoticComponent<CRangeSliderProps & React.RefAttributes<HTMLDivElement>>;