@arcgis/core 5.0.0-next.51 → 5.0.0-next.53

package/widgets/Slider.d.ts

@@ -1,4 +1,840 @@
-import "../interfaces";
+import type Collection from "../core/Collection.js";
+import type Widget from "./Widget.js";
+import type SliderViewModel from "./Slider/SliderViewModel.js";
+import type { Icon } from "@esri/calcite-components/components/calcite-icon";
+import type { WidgetProperties } from "./Widget.js";
+import type { InputCreatedFunction, LabelInfos, MaxClickEvent, MinClickEvent, SegmentClickEvent, SegmentDragEvent, ThumbChangeEvent, ThumbClickEvent, ThumbCreatedFunction, ThumbDragEvent, TrackClickEvent, TickConfig, MaxChangeEvent, MinChangeEvent, TickClickEvent } from "./Slider/interfaces.js";
+import type { InputParseFunction, InputFormatFunction, LabelFormatFunction } from "./support/interfaces.js";
+import type { SliderViewModelProperties } from "./Slider/SliderViewModel.js";
 
-import Slider = __esri.Slider;
-export default Slider;
+export interface SliderProperties extends WidgetProperties, Partial<Pick<Slider, "disabled" | "draggableSegmentsEnabled" | "effectiveMax" | "effectiveMin" | "inputCreatedFunction" | "inputFormatFunction" | "inputParseFunction" | "labelFormatFunction" | "labelInputsEnabled" | "layout" | "max" | "min" | "precision" | "rangeLabelInputsEnabled" | "snapOnClickEnabled" | "steps" | "syncedSegmentsEnabled" | "thumbCreatedFunction" | "thumbsConstrained" | "tickConfigs" | "values" | "visibleElements">> {
+  /**
+   * Icon displayed in the widget's button.
+   *
+   * @default "caret-double-horizontal"
+   * @since 4.27
+   * @see [Calcite Icon Search](https://developers.arcgis.com/calcite-design-system/icons/)
+   * @see [Calcite Icon Search](https://developers.arcgis.com/calcite-design-system/icons/)
+   */
+  icon?: Icon["icon"] | null;
+  /**
+   * The widget's default label. This label displays when it is
+   * used within another widget, such as the [Expand](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Expand.html)
+   * or [LayerList](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html) widgets.
+   *
+   * @since 4.11
+   */
+  label?: string | null;
+  /**
+   * The view model for the Slider widget. This is a class that contains all the logic
+   * (properties and methods) that controls this widget's behavior. See the
+   * [SliderViewModel](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider-SliderViewModel.html)
+   * class to access all properties and methods on the Slider widget.
+   */
+  viewModel?: SliderViewModelProperties;
+}
+
+export type SliderLayout = "vertical" | "vertical-reversed" | "horizontal" | "horizontal-reversed";
+
+export type SliderState = "disabled" | "ready" | "dragging" | "editing";
+
+/**
+ * The HTML Element nodes representing a single slider tick and its associated label.
+ *
+ * @since 4.20
+ */
+export interface TickElementGroup {
+  /** The HTMLElement representing the label associated with the tick element. You can add or modify the style of a tick label by adding CSS classes to this element. You can also attach event listeners to this element. */
+  labelElement?: HTMLElement | null;
+  /** The HTMLElement representing a tick. You can add or modify the style of a tick by adding CSS classes to this element. You can also attach event listeners to this element. */
+  tickElement?: HTMLElement | null;
+}
+
+/**
+ * The base interface for all slider events. Contains events that are not
+ * publicly documented in some slider types.
+ */
+export interface CommonSliderEvents {
+  /**
+   * Fires when a user changes the [max](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#max) of the slider.
+   *
+   * @example
+   * slider.on("max-change", function() {
+   *   const renderer = layer.renderer.clone();
+   *   const visualVariable = renderer.visualVariables[0].clone();
+   *   colorVariable.stops = slider.stops;
+   *   renderer.visualVariables = [ visualVariable ];
+   *   layer.renderer = renderer;
+   * });
+   */
+  "max-change": MaxChangeEvent;
+  /**
+   * Fires when a user changes the [min](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#min) of the slider.
+   *
+   * @example
+   * slider.on("min-change", function() {
+   *   const renderer = layer.renderer.clone();
+   *   const visualVariable = renderer.visualVariables[0].clone();
+   *   colorVariable.stops = slider.stops;
+   *   renderer.visualVariables = [ visualVariable ];
+   *   layer.renderer = renderer;
+   * });
+   */
+  "min-change": MinChangeEvent;
+  /**
+   * Fires when a user drags a [segment](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#segmentElements) of the slider. A segment is the portion
+   * of the track that lies between two thumbs. Therefore, this only applies when
+   * two or more thumbs are set on the slider.
+   *
+   * @since 4.20
+   * @see [SmartMappingSliderBase#visibleElements](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-SmartMappingSliderBase.html#visibleElements)
+   * @example
+   * slider.on("segment-drag", () => {
+   *   const renderer = layer.renderer.clone();
+   *   const visualVariable = renderer.visualVariables[0].clone();
+   *   colorVariable.stops = slider.stops;
+   *   renderer.visualVariables = [ visualVariable ];
+   *   layer.renderer = renderer;
+   * });
+   */
+  "segment-drag": SegmentDragEvent;
+  /**
+   * Fires when a user changes the value of a thumb via the arrow keys or by keyboard editing of the label on the slider.
+   *
+   * @example
+   * slider.on("thumb-change", function() {
+   *   const renderer = layer.renderer.clone();
+   *   const visualVariable = renderer.visualVariables[0].clone();
+   *   colorVariable.stops = slider.stops;
+   *   renderer.visualVariables = [ visualVariable ];
+   *   layer.renderer = renderer;
+   * });
+   * @example
+   * slider.on("thumb-change", function() {
+   *   const renderer = layer.renderer.clone();
+   *   renderer.colorStops = slider.stops;
+   *   layer.renderer = renderer;
+   * });
+   */
+  "thumb-change": ThumbChangeEvent;
+  /**
+   * Fires when a user drags a thumb on the widget.
+   *
+   * @example
+   * slider.on("thumb-drag", function() {
+   *   const renderer = layer.renderer.clone();
+   *   const visualVariable = renderer.visualVariables[0].clone();
+   *   colorVariable.stops = slider.stops;
+   *   renderer.visualVariables = [ visualVariable ];
+   *   layer.renderer = renderer;
+   * });
+   * @example
+   * slider.on("thumb-drag", function() {
+   *   const renderer = layer.renderer.clone();
+   *   renderer.colorStops = slider.stops;
+   *   layer.renderer = renderer;
+   * });
+   */
+  "thumb-drag": ThumbDragEvent;
+}
+
+/**
+ * While CommonSliderEvents already declares some of these events, they are not
+ * public. The SliderEvents re-declares them so that public JSDoc can be
+ * attached to them without publishing these events in CommonSliderEvents.
+ */
+export interface SliderEvents extends CommonSliderEvents {
+  /**
+   * Fires when a user clicks the [max label element](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#maxLabelElement).
+   *
+   * @since 4.20
+   */
+  "max-click": MaxClickEvent;
+  /**
+   * Fires when a user clicks the [min label element](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#minLabelElement).
+   *
+   * @since 4.20
+   */
+  "min-click": MinClickEvent;
+  /**
+   * Fires when a user clicks a [segment element](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#segmentElements) on the slider. A segment is a portion
+   * of the track that lies between two thumbs. This only applies when
+   * two or more thumbs are set on the slider.
+   *
+   * @since 4.20
+   */
+  "segment-click": SegmentClickEvent;
+  /**
+   * Fires when a user clicks a [thumb element](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#thumbElements).
+   *
+   * @since 4.20
+   */
+  "thumb-click": ThumbClickEvent;
+  /**
+   * Fires when a user clicks a [tick or its associated label](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#tickElements).
+   *
+   * @since 4.20
+   */
+  "tick-click": TickClickEvent;
+  /**
+   * Fires when a user clicks the [track element](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#trackElement).
+   *
+   * @since 4.20
+   */
+  "track-click": TrackClickEvent;
+}
+
+/**
+ * The visible elements that are displayed within the widget.
+ * This provides the ability to turn individual elements of the widget's display on/off.
+ * Alternatively, developers may also use CSS (e.g. `display: none`) to show/hide elements, such as labels.
+ */
+export interface VisibleElements {
+  /**
+   * Indicates whether to display labels for slider thumbs. By default, labels
+   *   display input thumb values as floating point values with a precision of two digits.
+   *   The format of labels can be customized via the [labelFormatFunction](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#labelFormatFunction).
+   *
+   * @default false
+   */
+  labels?: boolean;
+  /**
+   * Indicates whether to display [min](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#min) or [max](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#max) range values on the slider.
+   *   The format of labels can be customized via the [labelFormatFunction](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#labelFormatFunction).
+   *
+   * @default false
+   */
+  rangeLabels?: boolean;
+}
+
+/**
+ * A slider widget that can be used for filtering data, or gathering
+ * numeric input from a user. The slider can have multiple thumbs, and provides you
+ * with the ability to format labels and control user input.
+ *
+ * <span id="image-annotations"></span>
+ * See the image below for a summary of the configurable options available on this slider.
+ *
+ * ![Slider with annotations](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/sliders/slider-labels.png "Slider with annotations")
+ *
+ * At a minimum, the slider's [container](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#container) or parent container must have a `width` set in CSS for it to render.
+ *
+ * @since 4.12
+ * @see [SliderViewModel](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider-SliderViewModel.html)
+ * @example
+ * const slider = new Slider({
+ *   container: "sliderDiv",
+ *   min: 0,
+ *   max: 100,
+ *   values: [ 50 ],
+ *   snapOnClickEnabled: false,
+ *   visibleElements: {
+ *     labels: true,
+ *     rangeLabels: true
+ *   }
+ * });
+ */
+export default class Slider extends Widget<SliderProperties> {
+  /**
+   * @deprecated
+   * Do not directly reference this property.
+   * Use EventNames and EventTypes helpers from \@arcgis/core/Evented
+   */
+  "@eventTypes": SliderEvents;
+  /**
+   * @example
+   * // Typical usage
+   * const slider = new Slider({
+   *   container: "sliderDiv",
+   *   min: 0,
+   *   max: 100,
+   *   values: [ 50 ]
+   * });
+   */
+  constructor(properties?: SliderProperties);
+  /**
+   * When `true`, sets the slider to a disabled state so the user cannot interact
+   * with it.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /**
+   * Indicates if the user can drag the segment between thumbs
+   * to update thumb positions.
+   *
+   * @default true
+   * @example
+   * // disables draggable segments
+   * slider.draggableSegmentsEnabled = false;
+   */
+  accessor draggableSegmentsEnabled: boolean;
+  /**
+   * When set, the user is restricted from moving slider thumbs to positions higher than
+   * this value. This value should be less than the slider [max](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#max).
+   * The `effectiveMax` and [effectiveMin](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#effectiveMin) allow you to represent ranges of values in a dataset that cannot
+   * be filtered or selected with the slider. This can be useful when using the slider to
+   * represent datasets with outliers, or scale ranges not suitable for a layer.
+   *
+   * @since 4.23
+   * @example
+   * // slider.max = 100
+   * slider.effectiveMax = 60;
+   * // now the user cannot slide thumbs above
+   * // 60 even though the slider track displays
+   * // values up to 100.
+   */
+  accessor effectiveMax: number | null | undefined;
+  /**
+   * When set, the user is restricted from moving slider thumbs to positions less than
+   * this value.  This value should be greater than the slider [min](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#min).
+   * The `effectiveMin` and [effectiveMax](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#effectiveMax) allow you to represent ranges of values in a dataset that cannot
+   * be filtered or selected with the slider. This can be useful when using the slider to
+   * represent datasets with outliers, or scale ranges not suitable for a layer.
+   *
+   * @since 4.23
+   * @example
+   * // slider.min = 0
+   * slider.effectiveMin = 4;
+   * // now the user cannot slide thumbs below
+   * // 4 even though the slider track displays
+   * // values down to 0.
+   */
+  accessor effectiveMin: number | null | undefined;
+  /**
+   * The HTML Element nodes representing the slider segment between the [min](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#min) and [effectiveMin](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#effectiveMin), and the segment between the
+   * [effectiveMax](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#effectiveMax) and [max](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#max). You can use this property to customize the style and attach event handlers to these segments.
+   * This only applies to sliders where the `effectiveMin` and `effectiveMax` are specified.
+   *
+   * @since 4.23
+   * @example slider.effectiveSegmentElements.forEach( segmentElement => segmentElement.classList.add("redLine") );
+   */
+  get effectiveSegmentElements(): Collection<HTMLElement>;
+  /**
+   * Icon displayed in the widget's button.
+   *
+   * @default "caret-double-horizontal"
+   * @since 4.27
+   * @see [Calcite Icon Search](https://developers.arcgis.com/calcite-design-system/icons/)
+   * @see [Calcite Icon Search](https://developers.arcgis.com/calcite-design-system/icons/)
+   */
+  get icon(): Icon["icon"];
+  set icon(value: Icon["icon"] | null | undefined);
+  /**
+   * A function that provides the developer with access to the input elements when
+   * [rangeLabelInputsEnabled](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#rangeLabelInputsEnabled) and/or [labelInputsEnabled](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#labelInputsEnabled) are set to `true`.
+   * This allows the developer to customize the input elements corresponding to slider min/max and thumb values
+   * to validate user input. For example, you can access input elements and customize them with `type` and `pattern` attributes.
+   *
+   * @see [labelInputsEnabled](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#labelInputsEnabled)
+   * @see [rangeLabelInputsEnabled](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#rangeLabelInputsEnabled)
+   * @example
+   * // Sets the slider thumb inputs as number inputs
+   * slider.inputCreatedFunction = function(input, type, index){
+   *   input.setAttribute("type", "number");
+   *   input.setAttribute("pattern", "[0-9]*");
+   * };
+   */
+  accessor inputCreatedFunction: InputCreatedFunction | null | undefined;
+  /**
+   * A function used to format user inputs. As opposed to [labelFormatFunction](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#labelFormatFunction), which formats
+   * thumb labels, the `inputFormatFunction` formats thumb values in the input element when the user begins
+   * to edit them.
+   *
+   * The image below demonstrates how slider input values resemble corresponding slider values by default
+   * and won't match the formatting set in `labelFormatFunction`.
+   *
+   * ![Slider without input formatter](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/sliders/slider-no-input-formatter.png "Slider without input formatter")
+   *
+   * If you want to format slider input values so they match thumb labels, you can pass the same function set in `labelFormatFunction` to
+   * `inputFormatFunction` for consistent formatting.
+   *
+   * ![Slider with input formatter](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/sliders/slider-input-formatter.png "Slider with input formatter")
+   *
+   * However, if an `inputFormatFunction` is specified, you must also write a corresponding
+   * [inputParseFunction](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#inputParseFunction) to parse user inputs to understandable slider values. In most cases, if
+   * you specify an `inputFormatFunction`, you should set the [labelFormatFunction](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#labelFormatFunction) to the same value
+   * for consistency between labels and inputs.
+   *
+   * This property overrides the default input formatter, which formats by calling `toString()` on the input value.
+   *
+   * @see [inputParseFunction](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#inputParseFunction)
+   * @example
+   * // Formats the slider input to abbreviated numbers with units
+   * // e.g. a thumb at position 1500 will render with an input label of 1.5k
+   * slider.inputFormatFunction = function(value, type){
+   *   if(value >= 1000000){
+   *     return (value / 1000000).toPrecision(3) + "m"
+   *   }
+   *   if(value >= 100000){
+   *     return (value / 1000).toPrecision(3) + "k"
+   *   }
+   *   if(value >= 1000){
+   *     return (value / 1000).toPrecision(2) + "k"
+   *   }
+   *   return value.toFixed(0);
+   * }
+   */
+  accessor inputFormatFunction: InputFormatFunction | null | undefined;
+  /**
+   * Function used to parse slider inputs formatted by the [inputFormatFunction](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#inputFormatFunction).
+   * This property must be set if an `inputFormatFunction` is set. Otherwise the slider values will
+   * likely not update to their expected positions.
+   *
+   * Overrides the default input parses, which is a parsed floating point number.
+   *
+   * @see [inputFormatFunction](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#inputFormatFunction)
+   * @example
+   * // Parses the slider input (a string value) to a number value understandable to the slider
+   * // This assumes the slider was already configured with an inputFormatFunction
+   * // For example, if the input is 1.5k this function will parse
+   * // it to a value of 1500
+   * slider.inputParseFunction = function(value, type, index){
+   *   let charLength = value.length;
+   *   let valuePrefix = parseFloat(value.substring(0,charLength-1));
+   *   let finalChar = value.substring(charLength-1);
+   *
+   *   if(parseFloat(finalChar) >= 0){
+   *     return parseFloat(value);
+   *   }
+   *   if(finalChar === "k"){
+   *     return valuePrefix * 1000;
+   *   }
+   *   if(finalChar === "m"){
+   *     return valuePrefix * 1000000;
+   *   }
+   *   return value;
+   * }
+   */
+  accessor inputParseFunction: InputParseFunction | null | undefined;
+  /**
+   * The widget's default label. This label displays when it is
+   * used within another widget, such as the [Expand](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Expand.html)
+   * or [LayerList](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html) widgets.
+   *
+   * @since 4.11
+   */
+  get label(): string;
+  set label(value: string | null | undefined);
+  /**
+   * The HTML Element nodes representing [labels](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#labels) attached to slider thumbs. You can use this property to customize the style of labels and attach event handlers to each element.
+   *
+   * @since 4.20
+   * @example slider.labelElements.forEach( labelElement => labelElement.classList.add("newStyle") );
+   */
+  get labelElements(): Collection<HTMLElement>;
+  /**
+   * A function used to format labels. Overrides the default label formatter.
+   *
+   * By default labels are formatted in the following way:
+   *
+   * - When the data range is less than `10` (`(max - min) < 10`), labels
+   *   are rounded based on the value set in the [precision](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#precision) property.
+   * - When the data range is larger than `10`, [labels](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#labels) display with a precision of
+   *   no more than two decimal places, though actual slider thumb values will maintain the
+   *   precision specified in [precision](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#precision).
+   *
+   * Use this property to override the behavior defined above.
+   *
+   * @example
+   * // For thumb values, rounds each label to whole numbers.
+   * // Note the actual value of the thumb continues to be stored
+   * // based on the indicated data `precision` despite this formatting
+   * slider.labelFormatFunction = function(value, type) {
+   *   return (type === "value") ? value.toFixed(0) : value;
+   * }
+   */
+  accessor labelFormatFunction: LabelFormatFunction | null | undefined;
+  /**
+   * Indicates whether to enable editing input values via keyboard input
+   * when the user clicks a label. This allows the user to move the slider
+   * thumb to precise values without sliding the thumbs.
+   *
+   * ![Slider editable labels](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/sliders/slider-edit-label.png "Slider with editable labels")
+   *
+   * @default false
+   * @example
+   * // allows the slider input label to be used for keyboard input
+   * slider.labelInputsEnabled = true;
+   */
+  accessor labelInputsEnabled: boolean;
+  /**
+   * An array of strings associated with 'values' generated using an internal label formatter or
+   * the values returned from [labelFormatFunction](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#labelFormatFunction).
+   */
+  get labels(): LabelInfos;
+  /**
+   * Determines the layout/orientation of the Slider widget. By default, the slider
+   * will render horizontally with the min value on the left side of the track. The
+   * possible values are described below.
+   *
+   * **`horizontal`**
+   *
+   * ![Slider horizontal not reversed](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/sliders/slider-horizontal-not-reversed.png "default horizontal slider")
+   *
+   * **`horizontal-reversed`**
+   *
+   * When the slider is set to `horizontal-reversed`, the max value will render on the
+   * left side and the min on the right.
+   *
+   * ![Slider horizontal reversed](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/sliders/slider-horizontal-reversed.png "reversed horizontal slider")
+   *
+   * **`vertical`**
+   *
+   * When the slider is set to `vertical`, the max value will render on the
+   * top of the track and the min on the bottom.
+   *
+   * ![Slider vertical not reversed](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/sliders/slider-vertical-not-reversed.png "default vertical slider")
+   *
+   * **`vertical-reversed`**
+   *
+   * When the slider is set to `vertical-reversed`, the max value will render on the
+   * bottom of the track and the min on the top.
+   *
+   * ![Slider vertical reversed](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/sliders/slider-vertical-reversed.png "reversed vertical slider")
+   *
+   * @default "horizontal"
+   * @example slider.layout = "vertical";
+   */
+  accessor layout: SliderLayout;
+  /**
+   * The maximum possible data/thumb value of the slider. In the constructor, if one of the values
+   * specified in [values](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#values) is greater than the `max` value specified
+   * in this property, then the `max` will update to the highest value in `values`.
+   *
+   * To display the `max` value's label on the slider, set [visibleElements.rangeLabels](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#visibleElements) to `true`.
+   * To allow the end user to modify the max value, set
+   * [rangeLabelInputsEnabled](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#rangeLabelInputsEnabled) to `true`.
+   *
+   * @see [rangeLabelInputsEnabled](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#rangeLabelInputsEnabled)
+   * @see [visibleElements](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#visibleElements)
+   * @example
+   * const slider = new Slider({
+   *   container: "sliderDiv",
+   *   min: 0,
+   *   max: 100,
+   *   values: [ 50 ]
+   * });
+   */
+  accessor max: number | null | undefined;
+  /**
+   * The HTML Element node representing the [max](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#max) value label. You can use this property
+   * to customize the style and attach event handlers.
+   *
+   * @since 4.20
+   * @example slider.maxLabelElement.classList.add('maxClass');
+   * @example
+   * slider.maxLabelElement.addEventListener('click', () => {
+   *   slider.values = [ slider.max ];
+   * });
+   */
+  get maxLabelElement(): HTMLElement | null | undefined;
+  /**
+   * The minimum possible data/thumb value of the slider. In the constructor, if one of the values
+   * specified in [values](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#values) is less than the `min` value specified
+   * in this property, then the `min` will update to the lowest value in `values`.
+   *
+   * To display the `min` value's label on the slider, set [visibleElements.rangeLabels](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#visibleElements) to `true`.
+   * To allow the end user to modify the min value, set
+   * [rangeLabelInputsEnabled](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#rangeLabelInputsEnabled) to `true`.
+   *
+   * @see [rangeLabelInputsEnabled](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#rangeLabelInputsEnabled)
+   * @see [visibleElements](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#visibleElements)
+   * @example
+   * const slider = new Slider({
+   *   container: "sliderDiv",
+   *   min: 0,
+   *   max: 100,
+   *   values: [ 50 ]
+   * });
+   */
+  accessor min: number | null | undefined;
+  /**
+   * The HTML Element node representing the [min](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#min) value label. You can use this property
+   * to customize the style and attach event handlers.
+   *
+   * @since 4.20
+   * @example slider.minLabelElement.classList.add('minClass');
+   * @example
+   * slider.minLabelElement.addEventListener('click', () => {
+   *   slider.values = [ slider.min ];
+   * });
+   */
+  get minLabelElement(): HTMLElement | null | undefined;
+  /**
+   * Defines how slider thumb values should be rounded. This number indicates the number
+   * of decimal places slider thumb _values_ should round to when they have been moved.
+   *
+   * This value also indicates the precision of thumb [labels](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#labels) when the data range
+   * is less than `10` (i.e. `(max - min) < 10`).
+   *
+   * When the data range is larger than `10`, [labels](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#labels) display with a precision of
+   * no more than two decimal places, though actual slider thumb values will maintain the
+   * precision specified in this property.
+   *
+   * For example, given the default precision of `4`, and the following slider configuration,
+   * The labels of the thumbs will display two decimal places, but the precision of the actual
+   * thumb values will not be lost even when the user slides or moves the thumb.
+   *
+   * ```js
+   * const slider = new Slider({
+   *   min: 20,
+   *   max: 100,  // data range of 80
+   *   values: [50.4331],
+   *   // thumb label will display 50.43
+   *   // thumb value will maintain precision, so
+   *   // value will remain at 50.4331
+   *   container: "sliderDiv"
+   * });
+   * ```
+   *
+   * If the user manually enters a value that has a higher precision than what's indicated by
+   * this property, the precision of that thumb value will be maintained until the thumb
+   * is moved by the user. At that point, the value will be rounded according to the indicated precision.
+   *
+   * If thumb labels aren't visible, they must be enabled with [labelInputsEnabled](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#labelInputsEnabled).
+   *
+   * Keep in mind this property rounds thumb [values](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#values) and shouldn't be used exclusively
+   * for formatting purposes. To format thumb `labels`, use the [labelFormatFunction](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#labelFormatFunction)
+   * property.
+   *
+   * @default 4
+   * @example slider.precision = 7;
+   */
+  accessor precision: number;
+  /**
+   * Indicates whether to enable editing range values via keyboard input
+   * when the user clicks a [min](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#min) or [max](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#max) label.
+   * This allows the user to increase or decrease the data range of the slider.
+   *
+   * ![Slider editable range labels](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/sliders/slider-edit-range-label.png "Slider with editable range labels")
+   *
+   * @default false
+   * @example slider.rangeLabelInputsEnabled = false;
+   */
+  accessor rangeLabelInputsEnabled: boolean;
+  /**
+   * The HTML Element nodes representing interactive slider segments. Segments are interactive when situated between two thumbs. You can use this property to customize the style and attach event handlers to segments.
+   *
+   * @since 4.20
+   * @example slider.segmentElements.forEach( segmentElement => segmentElement.classList.add("thickLine") );
+   */
+  get segmentElements(): Collection<HTMLElement>;
+  /**
+   * Indicates if the closest thumb will snap to the clicked location on the track.
+   *
+   * @default true
+   * @example
+   * // disables snapping thumb values by click
+   * slider.snapOnClickEnabled = false;
+   */
+  accessor snapOnClickEnabled: boolean;
+  /** The current state of the widget. */
+  get state(): SliderState;
+  /**
+   * Sets steps, or intervals, on the slider that restrict user
+   * input to specific values. If an array of numbers is passed to this
+   * property, the slider thumbs may only be moved to the positions
+   * specified in the array.
+   *
+   * If a single number is set, then steps are set along the entire
+   * slider range at an interval of the provided value. In this scenario,
+   * the user may only slide the thumbs to values at the provided interval.
+   * For example, if a value of `0.5` is set here, and the slider
+   * [min](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#min) is `0` and the slider [max](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#max) is `10`, then the user will
+   * only be able to update the thumbs to values of 0, 0.5, 1.0, 1.5, 2.0, etc.
+   *
+   * @example
+   * // set steps at an interval of 0.5. So the
+   * // slider thumb snaps at values of 0.5, 1.0, 1.5, etc.
+   * slider.steps = 0.5;
+   * @example
+   * // Set steps at specific slider positions
+   * slider.steps = [ 5, 10, 15, 20, 25, 30, 35, 40 ];
+   */
+  accessor steps: number | number[] | null | undefined;
+  /**
+   * When `true`, all segments will sync together in updating thumb values when the user drags any segment. This maintains the interval between all thumbs when any segment is dragged.
+   * Only applicable when [draggableSegmentsEnabled](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#draggableSegmentsEnabled) is `true`.
+   *
+   * @default false
+   * @since 4.20
+   * @example
+   * slider.draggableSegmentsEnabled = true;
+   * slider.syncedSegmentsEnabled = true;
+   */
+  accessor syncedSegmentsEnabled: boolean;
+  /**
+   * Function that executes each time a thumb is created on the slider. This can
+   * be used to add custom styling to each thumb or hook event listeners to
+   * specific thumbs.
+   *
+   * @example
+   * slider.thumbCreatedFunction = function(index, value, thumbElement) {
+   *   thumbElement.classList.add("change-color");
+   *   thumbElement.addEventListener("focus", function() {
+   *     // add custom behavior here...tooltips, fire other actions, etc.
+   *   });
+   * });
+   */
+  accessor thumbCreatedFunction: ThumbCreatedFunction | null | undefined;
+  /**
+   * The HTML Element nodes representing slider thumbs. You can use this property to customize the style of thumbs and attach event handlers to each thumb.
+   *
+   * @since 4.20
+   * @example slider.thumbElements.forEach( thumbElement => thumbElement.classList.add("greenThumb") );
+   */
+  get thumbElements(): Collection<HTMLElement>;
+  /**
+   * When `false`, the user can freely move any slider thumb to any
+   * position along the track. By default, a
+   * thumb's position is constrained to the positions of neighboring thumbs so
+   * you cannot move one thumb past another. Set this property to `false` to
+   * disable this constraining behavior.
+   *
+   * @default true
+   * @example
+   * // allows the user to freely move slider
+   * // thumbs to any position along the track
+   * slider.thumbsConstrained = false;
+   */
+  accessor thumbsConstrained: boolean;
+  /**
+   * When set, renders ticks along the slider track. See the [TickConfig](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider-interfaces.html#TickConfig) documentation
+   * for more information on how to configure tick placement, style, and behavior.
+   *
+   * @example
+   * // places 25 ticks on the slider track
+   * // evenly spaced from one another
+   * slider.tickConfigs = [{
+   *   mode: "count",
+   *   values: 25
+   * }];
+   * @example
+   * // places ticks spanning the width of
+   * // the slider at 20% intervals from one another
+   * // this is the equivalent of setting mode to 'count'
+   * // and the values to 5.
+   * slider.tickConfigs = [{
+   *   mode: "percent",
+   *   values: 20
+   * }];
+   * @example
+   * // Places three ticks on the slider: one positioned
+   * // 10% of the width from the start (or min value), another
+   * // directly in the middle (50% from the start), and
+   * // another 90% of the width from the start of the slider.
+   * // Because the values are %s the values are always relative
+   * // regardless of the range of the slider values.
+   * slider.tickConfigs = [{
+   *   mode: "percent",
+   *   values: [ 10, 50, 90 ]
+   * }];
+   * @example
+   * // Places 5 ticks on the slider at the slider values
+   * // provided below. These are absolute positions.
+   * slider.tickConfigs = [{
+   *   mode: "position",
+   *   values: [ 0, 5, 10, 15, 20 ]
+   * }];
+   * @example
+   * // Places a single tick at the location of the value of 5.
+   * slider.tickConfigs = [{
+   *   mode: "position",
+   *   values: 5
+   * }];
+   * @example
+   * // Renders three groups of ticks. The first is a basic set
+   * // of 25 ticks. The second places 4 ticks and adds custom
+   * // CSS classes to modify their styling. The third adds
+   * // a click event handler to the tick labels.
+   * slider.tickConfigs = [{
+   *   mode: "count",
+   *   values: 25
+   * }, {
+   *   mode: "percent",
+   *   values: [12.5, 37.5, 62.5, 87.5],
+   *   labelsVisible: true,
+   *   tickCreatedFunction: function(initialValue, tickElement, labelElement) {
+   *     tickElement.classList.add("mediumTicks");
+   *     labelElement.classList.add("mediumLabels");
+   *   }
+   * }, {
+   *   mode: "count",
+   *   values: 5,
+   *   labelsVisible: true,
+   *   tickCreatedFunction: function(initialValue, tickElement, labelElement) {
+   *     tickElement.classList.add("largeTicks");
+   *     labelElement.classList.add("largeLabels");
+   *     labelElement.onclick = function() {
+   *       const newValue = labelElement["data-value"];
+   *       slider.values = [ newValue ];
+   *     };
+   *   }
+   * }];
+   */
+  accessor tickConfigs: TickConfig[];
+  /**
+   * The HTML Element nodes representing slider ticks and their associated labels. These elements are created in [TickCreatedFunction](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider-interfaces.html#TickCreatedFunction) and configured in [tickConfigs](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#tickConfigs).
+   *
+   * @since 4.20
+   * @example
+   * slider.tickElements.at(0).forEach((tickElementGroup) => {
+   *   const { tickElement, labelElement } = tickElementGroup;
+   *   const newValue = labelElement["data-value"];
+   *   const setValue = () => {
+   *     slider.values = [ newValue ];
+   *   };
+   *   tickElement.addEventListener("click", setValue);
+   *   tickElement.style.cursor = "pointer";
+   *   labelElement.addEventListener("click", setValue);
+   *   labelElement.style.cursor = "pointer";
+   * });
+   */
+  get tickElements(): Collection<Collection<TickElementGroup>>;
+  /**
+   * The HTML Element node representing the slider track. Use this property to attach event listeners to
+   * the track or to customize the track's CSS.
+   *
+   * @example
+   * // Add CSS class to the track
+   * slider.trackElement.classList.add("thickTrack");
+   */
+  get trackElement(): HTMLElement | null | undefined;
+  /**
+   * An array of numbers representing absolute thumb positions on the slider.
+   *
+   * @see [SliderViewModel#setValue()](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider-SliderViewModel.html#setValue)
+   * @example
+   * const slider = new Slider({
+   *   min: 20,
+   *   max: 100,  // data range of 80
+   *   values: [50.4331],
+   *   // thumb label will display 50.43
+   *   // thumb value will maintain precision, so
+   *   // value will remain at 50.4331
+   *   container: "sliderDiv"
+   * });
+   */
+  accessor values: number[] | null | undefined;
+  /**
+   * The view model for the Slider widget. This is a class that contains all the logic
+   * (properties and methods) that controls this widget's behavior. See the
+   * [SliderViewModel](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider-SliderViewModel.html)
+   * class to access all properties and methods on the Slider widget.
+   */
+  get viewModel(): SliderViewModel;
+  set viewModel(value: SliderViewModelProperties);
+  /**
+   * The visible elements that are displayed within the widget.
+   * This property provides the ability to turn individual elements of the widget's display on/off.
+   *
+   * @since 4.15
+   * @example
+   * slider.visibleElements = {
+   *   labels: true,
+   *   rangeLabels: true
+   * };
+   */
+  accessor visibleElements: VisibleElements;
+}