@itwin/itwinui-react/esm/core/Slider/Slider.d.ts

A react component library for iTwinUI

import * as React from 'react';
import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
import type { Tooltip } from '../Tooltip/Tooltip.js';
/**
 * Determines which segments are shown with color.
 */
export type TrackDisplayMode = 'auto' | 'none' | 'odd-segments' | 'even-segments';
type TooltipProps = React.ComponentProps<typeof Tooltip>;
export type SliderProps = {
    /**
     * Minimum slider value.
     * @default 0
     */
    min?: number;
    /**
     * Maximum slider value.
     * @default 100
     */
    max?: number;
    /**
     * Array of one or more values to show.
     */
    values: number[];
    /**
     *  Determines which segments are shown with color.
     * 'none' - no colored tracks are displayed.
     * 'auto' - segment display is based on number of values.
     * 'odd-segments'- colored tracks shown in segments 1,3,5, etc.
     *                 Default if number of thumbs values are even.
     * 'even-segments'- colored tracks shown in segments 0,2,4, etc.
     *                 Default if number of thumbs values are odd.
     * @default 'auto'
     */
    trackDisplayMode?: TrackDisplayMode;
    /**
     * Step increment controls what values are allowed and the amount the value will
     * change when left and right arrows are pressed when a Thumb has focus.
     * @default 1
     */
    step?: number;
    /**
     * Forces control to be displayed in a disabled state where no interactive value
     * changes are allowed.
     * @default false
     */
    disabled?: boolean;
    /**
     * Function that can return tooltip props including content.
     */
    tooltipProps?: (index: number, val: number, step: number) => Partial<Omit<TooltipProps, 'children'>>;
    /**
     * Either an array of labels that will be placed under auto generated tick marks
     * that are spaced evenly across width of Slider or a custom component that allows
     * custom content to be placed in tick mark area below slider.
     */
    tickLabels?: React.ReactNode;
    /**
     * Label for the minimum value. If undefined then the min
     * value is shown. Use empty string for no label.
     */
    minLabel?: React.ReactNode;
    /**
     * Label for the maximum value. If undefined then the max
     * value is shown. Use empty string for no label.
     */
    maxLabel?: React.ReactNode;
    /**
     * Additional props for container `<div>` that hold the slider thumbs, and tracks.
     */
    trackContainerProps?: React.HTMLAttributes<HTMLDivElement>;
    /**
     * Allows props to be passed for slider-min
     */
    minProps?: React.ComponentProps<'span'>;
    /**
     * Allows props to be passed for slider-max
     */
    maxProps?: React.ComponentProps<'span'>;
    /**
     * Allows props to be passed for slider-track
     */
    trackProps?: React.ComponentProps<'div'>;
    /**
     * Allows props to be passed for slider-tick
     */
    tickProps?: React.ComponentProps<'span'>;
    /**
     * Allows props to be passed for slider-ticks
     */
    ticksProps?: React.ComponentProps<'div'>;
    /**
     * Defines the allowed behavior when moving Thumbs when multiple Thumbs are
     * shown. It controls if a Thumb movement should be limited to only move in
     * the segments adjacent to the Thumb. Possible values:
     * 'allow-crossing' - allows thumb to cross other thumbs. Default.
     * 'inhibit-crossing'- keeps the thumb from crossing and separated by a step.
     * @default 'inhibit-crossing'
     */
    thumbMode?: 'allow-crossing' | 'inhibit-crossing';
    /**
     * Callback that can provide additional props for `<div>` representing a thumb.
     */
    thumbProps?: (index: number) => React.ComponentPropsWithRef<'div'>;
    /**
     * Callback fired at the end of a thumb move (i.e. on pointerUp) and when user clicks on rail.
     */
    onChange?: (values: ReadonlyArray<number>) => void;
    /**
     * Callback fired when the value(s) of the slider are internally updated during
     * operations like dragging a Thumb. Use this callback with caution as a
     * high-volume of updates will occur when dragging.
     */
    onUpdate?: (values: ReadonlyArray<number>) => void;
    /**
     * The orientation of slider
     * @default 'horizontal'
     */
    orientation?: 'horizontal' | 'vertical';
};
/**
 * Slider component that display Thumbs for each value specified along a Rail.
 * @example
 * <Slider values={[10]} min={0} max={60} disabled />
 * <Slider values={[10, 20]} min={0} max={50} step={2} />
 * <Slider values={[10, 20, 30, 40]} min={0} max={60}
 *   thumbMode='allow-crossing' />
 */
export declare const Slider: PolymorphicForwardRefComponent<"div", SliderProps>;
export {};