@tiller-ds/form-elements/Slider.d.ts

Form elements module of Tiller Design System

import * as React from "react";
import { ComponentTokens } from "@tiller-ds/theme";
export declare type SliderProps = {
    /**
     * Name attribute of the hidden input element.
     */
    name: string;
    /**
     * Specifies the minimum allowed value of the slider. Should not be equal to prop "to".
     */
    from: number;
    /**
     * Specifies the maximum allowed value of the slider. Should not be equal to prop "from".
     */
    to: number;
    /**
     * Specifies the size of each movement of the slider.
     */
    step: number;
    /**
     * Specifies the value of the slider.
     */
    value?: number | number[];
    /**
     * Specifies the label above the slider (not exclusively text).
     */
    label?: React.ReactNode;
    /**
     * The help text displayed below the slider.
     */
    help?: React.ReactNode;
    /**
     * Value passed through from validation indicating to display the error on the component.
     */
    error?: React.ReactNode;
    /**
     * If multiple values are passed, they are both sliding at the same time.
     */
    stacked?: boolean;
    /**
     * Function that determines how the component outputs the step label of the slider.
     * Example: (value) => (value % 60 === 0 ? value / 60 : null)
     */
    getOptionLabel: (value: number) => number | string | null;
    /**
     * Function that handles the behaviour of the component once its state changes.
     */
    onChange?: (value: number) => void;
    /**
     * Custom classes for the container.
     * Overrides conflicting default styles, if any.
     *
     * The provided `className` is processed using `tailwind-merge` to eliminate redundant or conflicting Tailwind classes.
     */
    className?: string;
    /**
     * Custom styling for marker(s).
     */
    markerClassName?: string | string[];
} & SliderTokens;
declare type SliderTokens = {
    sliderTokens?: ComponentTokens<"Slider">;
    fieldTokens?: ComponentTokens<"Field">;
};
export default function Slider({ from, to, step, value, getOptionLabel, onChange, className, ...props }: SliderProps): JSX.Element;
export {};