@arcgis/core/widgets/ValuePicker/ValuePickerSlider.d.ts

ArcGIS Maps SDK for JavaScript: A complete 2D and 3D mapping and data visualization API

import type ValuePickerBaseComponent from "./ValuePickerBaseComponent.js";
import type ValuePickerSliderVisibleElements from "./ValuePickerSliderVisibleElements.js";
import type { LabelFormatFunction } from "../types.js";
import type { ValuePickerSliderVisibleElementsProperties } from "./ValuePickerSliderVisibleElements.js";
import type { ValuePickerBaseComponentProperties } from "./ValuePickerBaseComponent.js";

export interface ValuePickerSliderProperties extends ValuePickerBaseComponentProperties, Partial<Pick<ValuePickerSlider, "labelFormatFunction" | "labels" | "majorTicks" | "max" | "min" | "minorTicks" | "reversed" | "steps">> {
  /**
   * This property provides the ability to display or hide the individual elements of the widget.
   *
   * @example
   * // Create a ValuePicker widget with a slider and a thumb tooltip.
   * const valuePicker = new ValuePicker({
   *   component: new ValuePickerSlider({
   *     min: 0,
   *     max: 100,
   *     visibleElements: {
   *       thumbTooltip: true
   *     }
   *   },
   *   values: [0]
   * });
   */
  visibleElements?: ValuePickerSliderVisibleElementsProperties;
}

/**
 * This class represents a slider component that can be assigned to a [ValuePicker.component](https://developers.arcgis.com/javascript/latest/references/core/widgets/ValuePicker/#component)
 * property of a [ValuePicker](https://developers.arcgis.com/javascript/latest/references/core/widgets/ValuePicker/) widget.
 * See [Using the slider component to navigate numeric values](https://developers.arcgis.com/javascript/latest/references/core/widgets/ValuePicker/#numeric-values) section
 * for more information how to set this up.
 *
 * @since 4.27
 * @example
 * // Create a value picker with a slider component show percentages from 0 to 100.
 * const valuePickerSlider = new ValuePickerSlider({
 *   min: 0,
 *   max: 100,
 *   steps: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
 *   minorTicks: [5, 15, 25, 35, 45, 55, 65, 75, 85, 95],
 *   majorTicks: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
 *   labels: [0, 20, 40, 60, 80, 100],
 *   labelFormatFunction: (value) => `${value}%`
 * });
 * const valuePicker = new ValuePicker({
 *   component: valuePickerSlider,
 *   values: [50]
 * });
 */
export default class ValuePickerSlider extends ValuePickerBaseComponent {
  constructor(properties?: ValuePickerSliderProperties);
  /**
   * A function used to format labels. Overrides the default label formatter.
   *
   * @see [Slider.labelFormatFunction](https://developers.arcgis.com/javascript/latest/references/core/widgets/Slider/#labelFormatFunction)
   * @example
   * // Display a label for each step. Each label will display the value as a localized distance in abbreviated
   * // kilometers (e.g. "90 km").
   * const formatter = new Intl.NumberFormat(undefined, { style: "unit", unit: "kilometer" });
   * const steps = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
   * const valuePicker = new ValuePicker({
   *   component: new ValuePickerSlider({
   *     min: 0,
   *     max: 100,
   *     steps,
   *     labels: steps,
   *     labelFormatFunction: (value) => formatter.format(value)
   *   },
   *   values: [0]
   * });
   */
  accessor labelFormatFunction: LabelFormatFunction | null | undefined;
  /**
   * Slider tick labels.
   *
   * @example
   * // The assigned slider ranges in value from 0 to 100%. Steps are located at every 10% however labels are spaced very 20%.
   * const valuePicker = new ValuePicker({
   *   component: new ValuePickerSlider({
   *     min: 0,
   *     max: 100,
   *     steps: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
   *     labels: [0, 20, 40, 60, 80, 100],
   *     labelFormatFunction: (value) => `${value}%`
   *   },
   *   values: [0]
   * });
   */
  accessor labels: number[] | null | undefined;
  /**
   * The positions of major ticks. Minor ticks are represented as long label-less tick marks.
   *
   * @example
   * // Create ValuePicker with steps and minor ticks every 10 units from 0 to 100 and major ticks every 20.
   * const valuePicker = new ValuePicker({
   *   component: new ValuePickerSlider({
   *     min: 0,
   *     max: 100,
   *     steps: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
   *     minorTicks: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
   *     majorTicks: [0, 20, 40, 60, 80, 100]
   *   },
   *   values: [0]
   * });
   */
  accessor majorTicks: number[] | null | undefined;
  /**
   * The maximum possible data/thumb value of the slider.
   *
   * @see [Slider.max](https://developers.arcgis.com/javascript/latest/references/core/widgets/Slider/#max)
   */
  accessor max: number | null | undefined;
  /**
   * The minimum possible data/thumb value on the slider.
   *
   * @see [Slider.min](https://developers.arcgis.com/javascript/latest/references/core/widgets/Slider/#min)
   */
  accessor min: number | null | undefined;
  /**
   * The positions of minor ticks. Minor ticks are represented as short label-less tick marks.
   *
   * @example
   * // Create ValuePicker with steps and minor ticks every 10 units from 0 to 100.
   * const valuePicker = new ValuePicker({
   *   component: new ValuePickerSlider({
   *     min: 0,
   *     max: 100,
   *     steps: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
   *     minorTicks: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
   *   },
   *   values: [0]
   * });
   */
  accessor minorTicks: number[] | null | undefined;
  /**
   * When true, slider values will ascend right to left and bottom to top when horizontal and vertical respectively.
   *
   * @default false
   * @example
   * // Create a horizontal ValuePicker with slider values in descending order.
   * const valuePicker = new ValuePicker({
   *   layout: "horizontal",
   *   component: new ValuePickerSlider({
   *     min: 0,
   *     max: 100,
   *     reversed: true
   *   },
   *   values: [0]
   * });
   */
  accessor reversed: boolean;
  /**
   * Positions along the slider that the thumb will snap to when interacted with.
   *
   * @example
   * // Create a ValuePicker with a slider showing a date range from 1600 to 1900.
   * const dates = [
   *   new Date(1600, 0, 1),
   *   new Date(1700, 0, 1),
   *   new Date(1800, 0, 1),
   *   new Date(1900, 0, 1)
   * ];
   *
   * const valuePicker = new ValuePicker({
   *   component: new ValuePickerSlider({
   *     min: dates[0].getTime(),
   *     max: dates[dates.length - 1].getTime(),
   *     steps: dates.map((date) => date.getTime()),
   *     labels: dates.map((date) => date.getTime()),
   *     labelFormatFunction: (epoch) => new Date(epoch).toDateString()
   *   },
   *   values: [0]
   * });
   */
  accessor steps: number[] | null | undefined;
  get type(): "slider";
  /**
   * This property provides the ability to display or hide the individual elements of the widget.
   *
   * @example
   * // Create a ValuePicker widget with a slider and a thumb tooltip.
   * const valuePicker = new ValuePicker({
   *   component: new ValuePickerSlider({
   *     min: 0,
   *     max: 100,
   *     visibleElements: {
   *       thumbTooltip: true
   *     }
   *   },
   *   values: [0]
   * });
   */
  get visibleElements(): ValuePickerSliderVisibleElements;
  set visibleElements(value: ValuePickerSliderVisibleElementsProperties);
}