@esri/calcite-components/dist/components/calcite-slider/customElement.d.ts

Web Components for Esri's Calcite Design System.

/// <reference path="../../index.d.ts" />
import type { PublicLitElement as LitElement } from "@arcgis/lumina";
import type { MutableValidityState } from "../../utils/form.js";
import type { NumberingSystem } from "../../utils/locale.js";
import type { ColorStop, DataSeries } from "../calcite-graph/interfaces.js";
import type { Scale, Status } from "../interfaces.js";
import type { IconName } from "../calcite-icon/interfaces.js";

/**
 * @cssproperty [--calcite-slider-text-color] - Specifies the component's text color.
 * @cssproperty [--calcite-slider-track-color] - Specifies the component's track color.
 * @cssproperty [--calcite-slider-track-fill-color] - Specifies the component's track fill color.
 * @cssproperty [--calcite-slider-handle-fill-color] - Specifies the component's handle fill color.
 * @cssproperty [--calcite-slider-handle-extension-color] - Specifies the component's handle extension color.
 * @cssproperty [--calcite-slider-accent-color] - Specifies the component's accent color.
 * @cssproperty [--calcite-slider-tick-color] - Specifies the component's tick color.
 * @cssproperty [--calcite-slider-tick-border-color] - Specifies the component's tick border color.
 * @cssproperty [--calcite-slider-tick-selected-color] - Specifies the component's tick color when in selected range.
 * @cssproperty [--calcite-slider-graph-color] - Specifies the component's graph color.
 * @slot [label-content] - A slot for rendering content next to the component's `labelText`.
 */
export abstract class Slider extends LitElement {
  /**
   * When `true`, interaction is prevented and the component is displayed with lower opacity.
   *
   * @default false
   */
  accessor disabled: boolean;
  /**
   * When `value` is specified for single values, determines the track's fill relative to the component's handle.
   *
   * When `minValue` and `maxValue` are specified for multiple values, displays the fill between the `minValue` and `maxValue` handles.
   *
   * @default "start"
   */
  accessor fillPlacement: "start" | "none" | "end";
  /**
   * Specifies the `id` of the component's associated form.
   *
   * When not set, the component is associated with its ancestor form element, if one exists.
   */
  accessor form: string;
  /**
   * When `true`, number values are displayed with a group separator corresponding to the language and country format.
   *
   * @default false
   */
  accessor groupSeparator: boolean;
  /**
   * When `true`, indicates a histogram is present.
   *
   * @default false
   */
  accessor hasHistogram: boolean;
  /**
   * Specifies a list of the histogram's x,y coordinates within the component's `min` and `max`. Displays above the component's track.
   *
   * @see [DataSeries](https://github.com/Esri/calcite-design-system/blob/dev/packages/components/src/components/graph/interfaces.ts#L5).
   */
  accessor histogram: DataSeries;
  /** Specifies a list of single color stops for a histogram, sorted by offset in ascending order. */
  accessor histogramStops: ColorStop[];
  /** When specified, allows users to customize handle labels. */
  accessor labelFormatter: (value: number, type: "value" | "min" | "max" | "tick", defaultFormatter: (value: number) => string) => string | undefined;
  /**
   * When `true`, displays numeric value labels on handles.
   *
   * @default false
   */
  accessor labelHandles: boolean;
  /** Specifies the component's label text. */
  accessor labelText: string;
  /**
   * When `true` and `ticks` is specified, displays label tick marks with their numeric value.
   *
   * @default false
   */
  accessor labelTicks: boolean;
  /**
   * The component's maximum selectable value.
   *
   * @default 100
   */
  accessor max: number;
  /** When `minValue` and `maxValue` are specified for multiple values, specifies the accessible name for the `maxValue` handle, such as `"Temperature, upper bound"`. */
  accessor maxLabel: string;
  /** For multiple values, specifies the component's upper value. */
  accessor maxValue: number;
  /** Overrides individual strings used by the component. */
  accessor messageOverrides: { required?: string; };
  /**
   * Specifies the component's minimum selectable value.
   *
   * @default 0
   */
  accessor min: number;
  /** Specifies the accessible name associated with the `value` handle (for single values) or `minValue` handle (for multiple values). For instance, `"Temperature, lower bound"`. */
  accessor minLabel: string;
  /** For multiple values, the component's lower value. */
  accessor minValue: number;
  /**
   * When `true`, the component will display values from high to low.
   *
   * Note that this value will be ignored if the slider has an associated histogram.
   *
   * @default false
   */
  accessor mirrored: boolean;
  /**
   * Specifies the name of the component.
   *
   * Required to pass the component's `value` on form submission
   */
  accessor name: string;
  /** Specifies the Unicode numeral system used by the component for localization. */
  accessor numberingSystem: NumberingSystem;
  /** Specifies the interval to move with the `Page up` or `Page down` keys. */
  accessor pageStep: number;
  /**
   * When `true`, sets a finer point for handles.
   *
   * @default false
   */
  accessor precise: boolean;
  /**
   * When `true` and the component resides in a form,
   * the component must have a value in order for the form to submit.
   *
   * @default false
   */
  accessor required: boolean;
  /**
   * Specifies the component's size.
   *
   * @default "m"
   */
  accessor scale: Scale;
  /**
   * When `true` and `step` is specified, enables snap selection via a mouse.
   *
   * @default false
   */
  accessor snap: boolean;
  /**
   * Specifies the status of the input field, which determines message and icons.
   *
   * @default "idle"
   */
  accessor status: Status;
  /**
   * Specifies the interval to move with the `Arrow up` or `Arrow down` keys.
   *
   * @default 1
   */
  accessor step: number;
  /** Specifies the interval between tick marks on the number line. */
  accessor ticks: number;
  /** Specifies the validation icon to display under the component. */
  accessor validationIcon: IconName | boolean;
  /** Specifies the validation message to display under the component. */
  accessor validationMessage: string;
  /**
   * The component's current validation state.
   *
   * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
   */
  get validity(): MutableValidityState;
  /** The component's value. */
  accessor value: number | number[];
  /**
   * Sets focus on the component.
   *
   * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
   */
  setFocus(options?: FocusOptions): Promise<void>;
  /**
   * Fires when the component's handle is released.
   *
   * Note: To constantly listen to the drag event,
   * use `calciteSliderInput` instead.
   */
  readonly calciteSliderChange: import("@arcgis/lumina").TargetedEvent<this, void>;
  /**
   * Fires on all updates to the component.
   *
   * Note: Fires frequently during drag. To perform
   * expensive operations consider using a debounce or throttle to avoid
   * locking up the main thread.
   */
  readonly calciteSliderInput: import("@arcgis/lumina").TargetedEvent<this, void>;
  readonly "@eventTypes": {
    calciteSliderChange: Slider["calciteSliderChange"]["detail"];
    calciteSliderInput: Slider["calciteSliderInput"]["detail"];
  };
}