@massds/mayflower-react/dist/CompoundSlider/index.d.ts

React versions of Mayflower design system UI components

/**
 * CompoundSlider module.
 * @module @massds/mayflower-react/CompoundSlider
 */
import React from 'react';
export interface HandleProps {
    handle?: unknown;
    getHandleProps?(...args: unknown[]): unknown;
    axis?: string;
    min?: string | number;
    max?: string | number;
    step?: string | number;
    displayValueFormat?: string;
    disabled?: boolean;
}
export interface TrackProps {
    source?: unknown;
    target?: unknown;
    getTrackProps?(...args: unknown[]): unknown;
    axis?: string;
}
export interface TickProps {
    tick?: unknown;
    count?: number;
    getTrackProps?(...args: unknown[]): unknown;
    id?: string;
    axis?: string;
}
export interface CompoundSliderProps {
    /** The unique ID for the input field */
    id: string;
    /** Custom update function, triggered with the values on drag (caution: high-volume updates when dragging). Only if a function is passed to onUpdate will form context get updated on drag. */
    onUpdate?(...args: unknown[]): unknown;
    /** Custom on change function, triggered when the value of the slider has changed. This will recieve changes at the end of a slide as well as changes from clicks on rails and tracks. */
    onChange?(...args: unknown[]): unknown;
    /** Default input text value */
    defaultValue?: string;
    /** Max value for the field. */
    max: number;
    /** Min value for the field. */
    min: number;
    /** This controls how much sliding the handle increments/decrements the value of the slider. */
    step?: number;
    /** A Map object where each entry is a key (number inclusively between min and max) and value (label to display at the key) pair for displaying tick marks. */
    ticks?: Map;
    /** The direction for the slider, where x is horizontal and y is vertical. */
    axis?: "x" | "y";
    /** Disables the slider if true. */
    disabled?: boolean;
    /** The range of numbers, inclusively, for the slider to fall between. First number is the min and second number is the max. */
    domain?: number[];
    /** Display the value of the slider based. If null, don't display. If equals percentage, format the value in percentage. */
    displayValueFormat?: "percentage" | "value" | unknown;
}
declare class CompoundSlider extends React.Component<CompoundSliderProps> {
    render(): any;
}
export default CompoundSlider;