@stihl-design-system/components/components/Slider/Slider.utils.d.ts

Welcome to the STIHL Design System react component library.

import { SliderProps } from './Slider';
export declare const MAXIMUM_TICK_AMOUNT = 11;
export declare const LABEL_LENGTH_BREAKPOINT = 4;
/**
 * Returns the number of characters in a number, including the minus sign if present.
 *
 * @param {number} num - The number to check.
 * @returns {number} The total length of the number including all characters.
 *
 * @example
 * getNumberLength(12345); // 5
 * getNumberLength(-9876); // 5 (includes the minus sign)
 * getNumberLength(0);     // 1
 */
export declare const getNumberLength: (num: number) => number;
/**
 * Checks if a given value is aligned to a specific step interval,
 * starting from a defined minimum value. The check allows for minor
 * floating-point inaccuracies using an epsilon tolerance.
 *
 * @param {number} value - The numeric value to check for alignment.
 * @param {number} step - The step size that defines valid intervals.
 * @param {number} parsedMin - The minimum value from which steps start.
 * @returns {boolean} `true` if the value is aligned to the step; otherwise, `false`.
 */
export declare const isStepAligned: (value: number, step: number, parsedMin: number) => boolean;
/**
 * Snaps a numeric value to the nearest valid step within a defined range,
 * clamping it between the provided min and max values.
 *
 * @param value - The input number to be snapped.
 * @param step - The step size as a number or string (e.g., '0.5', 1).
 * @param min - The minimum allowed value.
 * @param max - The maximum allowed value.
 * @returns The value snapped to the nearest step, clamped and precision-adjusted.
 */
export declare const snapValueToStep: (value: number, step: string | number, min: number, max: number) => number;
/**
 * Calculates the CSS `left` offset for a tick mark on a slider component,
 * adjusting its position so that it aligns visually with the slider thumb.
 *
 * The function computes the percentage position of the tick based on the
 * provided `tickValue` in relation to the `parsedMin` and `parsedMax` range,
 * then applies a correction (`shift`) to ensure proper alignment with the thumb.
 *
 * The shift is calculated with a linear formula derived to meet specific
 * alignment criteria at 0%, 50%, and 100%.
 *
 * @param tickValue - The numeric value of the current tick mark.
 * @param parsedMin - The minimum value of the slider range.
 * @param parsedMax - The maximum value of the slider range.
 * @returns A CSS `left` value string using `calc()` to properly position the tick.
 */
export declare const getTickLeftOffset: (tickValue: number, parsedMin: number, parsedMax: number) => string;
type ValidationProps = Pick<SliderProps, 'id' | 'label'>;
/**
 * Validates the given properties of the DSSlider component for common configuration errors.
 * This function is intended to be used in development mode to provide developers with
 * warnings about potential misuse of the component.
 *
 * @param validationProps - The subset of DSSlider properties to validate. This includes
 *                          properties related to the prefix, suffix, icons and action button of the input.
 */
export declare const validateSliderProps: ({ id, label }: ValidationProps) => void;
export {};