@wix/design-system/dist/types/Slider/index.d.ts

@wix/design-system

import * as React from 'react';

export interface SliderProps {
  /** Allows sliders handles to cross.
   * @default true
   */
  allowCross?: boolean;
  /** Applies a data-hook HTML attribute that can be used in the tests. */
  dataHook?: string;
  /** Specifies a CSS class name to be appended to the component’s root element.
   * @internal
   */
  className?: string;
  /** Controls the visibility of the marks.
   * @default true
   */
  displayMarks?: boolean;
  /** Controls visibility of slide handle tooltip
   * @default true
   */
  displayTooltip?: boolean;
  /** Assigns an unique identifier for the root element. */
  id?: string;
  /** Sets the absolute maximum value of sliders range.
   * @default 20
   */
  max?: number;
  /** Sets the absolute minimum value of the sliders range.
   * @default 1
   */
  min?: number;
  /** Defines a callback function which will be called when ontouchend or onmouseup is triggered. */
  onAfterChange?: (value: number[] | number) => void;
  /** Defines a callback function which will be called when ontouchstart or onmousedown is triggered. */
  onBeforeChange?: (value: number[] | number) => void;
  /** Defines a callback function which is called upon every value change. */
  onChange?: (value: number[] | number) => void;
  /** Sets the onBlur callback for the slider's handle.
   * ```javascript
   *  onBlur((handleValue) => ({}))
   * ```
   */
  onBlur?: (value: number[] | number, event?: React.FocusEvent) => void;
  /** Sets the onFocus callback for the slider's handle.
   * ```javascript
   *  onFocus((handleValue) => ({}))
   * ```
   */
  onFocus?: (value: number[] | number, event?: React.FocusEvent) => void;
  /** Adjust component for RTL.
   * @default false
   */
  rtl?: boolean;
  /** Specifies the interval between range values.
   * @default 1
   */
  step?: number;
  /** Push surrounding handles when moving a handle (relevant for multi value sliders only). Number specifies a minimum distance between handles. */
  pushable?: boolean | number;
  /** Specifies the selected value.
   * @default 3
   */
  value?: number[] | number;
  /** Specifies whether interactions are disabled.
   * @default false
   */
  disabled?: boolean;
  /** Specifies slider marks. The key determines the position, and the value determines what will show. The object structure should be either
   * ```{ number : number}``` / ```{ number : string }```
   * */
  marks?: { [key: number]: number | string };
  /** Specifies the starting value of a track. If undefined, the minimum value of a range is used as a starting point.
   * @default undefined
   */
  startPoint?: number;
  /** Sets slider direction in either horizontal way or vertical
   * @default 'horizontal'
   */
  direction?: 'vertical' | 'horizontal';
  /** Set the aria-label attributes for slider handles. */
  ariaLabelForHandle?: string[] | string;
  /** Converts slider to a slider with a gradient background. RGB, HEX formats or color names are accepted.
   * ```javascript
   *  gradientColor="rgb(105, 110, 28)"
   *  gradientColor="#FFAC4B"
   *  gradientColor="pink"
   * ```
   * If color cannot be parsed, fallback color will be applied */
  gradientColor?: string;
  /** Sets the alignment of the marks labels.
   * @default 'center'
   */
  marksLabelAlignment?: 'center' | 'inside';
  /** Formats the raw value for display in tooltip.  */
  formatValue?: (value: number) => string;
}

export default class Slider extends React.PureComponent<SliderProps> {}