@arcgis/core/widgets/ScaleRangeSlider.d.ts

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

import type Layer from "../layers/Layer.js";
import type Sublayer from "../layers/support/Sublayer.js";
import type Widget from "./Widget.js";
import type ScaleRangeSliderViewModel from "./ScaleRangeSlider/ScaleRangeSliderViewModel.js";
import type { Icon } from "@esri/calcite-components/components/calcite-icon";
import type { MapViewOrSceneView } from "../views/MapViewOrSceneView.js";
import type { SupportedRegion } from "./ScaleRangeSlider/types.js";
import type { ScaleRangeSliderViewModelProperties } from "./ScaleRangeSlider/ScaleRangeSliderViewModel.js";
import type { WidgetProperties } from "./Widget.js";

export interface ScaleRangeSliderProperties extends WidgetProperties, Partial<Pick<ScaleRangeSlider, "disabled" | "layer" | "maxScale" | "maxScaleLimit" | "minScale" | "minScaleLimit" | "mode" | "region" | "showWorldValue" | "view" | "visibleElements">> {
  /**
   * Icon displayed in the widget's button.
   *
   * @default "actual-size"
   * @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.
   *
   * @since 4.11
   */
  label?: string | null;
  /**
   * The view model for this widget. This is a class that contains all the logic
   * (properties and methods) that controls this widget's behavior. See the
   * [ScaleRangeSliderViewModel](https://developers.arcgis.com/javascript/latest/references/core/widgets/ScaleRangeSlider/ScaleRangeSliderViewModel/) class to access
   * all properties and methods on the widget.
   */
  viewModel?: ScaleRangeSliderViewModelProperties;
}

/**
 * The visible elements that are displayed within the widget.
 * This provides the ability to turn individual elements of the widget's display on/off.
 */
export interface VisibleElements {
  /**
   * Indicates whether the preview thumbnail of the scale is visible.
   * Default value is `true`.
   */
  preview?: boolean;
  /**
   * Indicates whether the scale dropdown menus are visible.
   *
   * @since 4.24
   */
  scaleMenus?: boolean | VisibleElementsScaleMenus;
}

export interface VisibleElementsScaleMenus {
  /** Indicates whether the minimum scale dropdown menu is visible. Default value is `true`. */
  minScaleMenu?: boolean;
  /** Indicates whether the maximum scale dropdown menu is visible. Default value is `true`. */
  maxScaleMenu?: boolean;
}

/**
 * The ScaleRangeSlider widget allows the user to set a minimum and maximum scale based on named scale ranges.
 * When a layer is provided to the widget, the [minScale](https://developers.arcgis.com/javascript/latest/references/core/widgets/ScaleRangeSlider/#minScale) and [maxScale](https://developers.arcgis.com/javascript/latest/references/core/widgets/ScaleRangeSlider/#maxScale) are set to the
 * scale range of the layer.
 *
 * The user can update the scale range by dragging thumbs across the slider to update the minScale and maxScale.
 * The user can also change the `minScale` and `maxScale` by using the dropdowns underneath the [minScaleLimit](https://developers.arcgis.com/javascript/latest/references/core/widgets/ScaleRangeSlider/#minScaleLimit)
 * and [maxScaleLimit](https://developers.arcgis.com/javascript/latest/references/core/widgets/ScaleRangeSlider/#maxScaleLimit). The thumbnail shows a preview of the scale based on the [region](https://developers.arcgis.com/javascript/latest/references/core/widgets/ScaleRangeSlider/#region) specified.
 *
 * ![widgets-scaleRangeSlider](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/widgets-scaleRangeSlider-v2.png)
 *
 * @deprecated since version 5.0. Use the [Scale Range Slider component](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scale-range-slider/) instead. For information on widget deprecation, read about [Esri's move to web components](https://developers.arcgis.com/javascript/latest/components-transition-plan/).
 * @since 4.13
 * @see [ScaleRangeSliderViewModel](https://developers.arcgis.com/javascript/latest/references/core/widgets/ScaleRangeSlider/ScaleRangeSliderViewModel/)
 * @see [ScaleRanges](https://developers.arcgis.com/javascript/latest/references/core/widgets/ScaleRangeSlider/ScaleRanges/)
 * @see [Slider](https://developers.arcgis.com/javascript/latest/references/core/widgets/Slider/)
 * @example
 * const scaleRangeSlider = new ScaleRangeSlider({
 *   view: view,
 *   layer: featureLayer,  // scale range of this layer sets initial minScale and maxScale
 *   region: "MX",  // preview thumbnail will be of Mexico
 * });
 * view.ui.add(scaleRangeSlider, "bottom-left");
 *
 * // to update the featureLayer min/max scale based on the slider
 * reactiveUtils.watch(
 *   () => [scaleRangeSlider.minScale, scaleRangeSlider.maxScale],
 *   ([minScale, maxScale]) => {
 *     featureLayer.minScale = minScale;
 *     featureLayer.maxScale = maxScale;
 *   }
 * );
 */
export default class ScaleRangeSlider extends Widget {
  constructor(properties?: ScaleRangeSliderProperties);
  /**
   * When `true`, sets the widget to a disabled state so the user cannot interact with it.
   *
   * @default false
   */
  accessor disabled: boolean;
  /**
   * Icon displayed in the widget's button.
   *
   * @default "actual-size"
   * @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);
  /**
   * The widget's default label.
   *
   * @since 4.11
   */
  get label(): string;
  set label(value: string | null | undefined);
  /**
   * When provided, the initial [minScale](https://developers.arcgis.com/javascript/latest/references/core/widgets/ScaleRangeSlider/#minScale) and [maxScale](https://developers.arcgis.com/javascript/latest/references/core/widgets/ScaleRangeSlider/#maxScale) values will match the layer's.
   *
   * When a tiled layer is used, the slider will be restricted from moving the slider thumbs past the `lods` of the layer's tiling scheme.
   * Since version 4.28, when a [MapImageLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/MapImageLayer/) is used, the slider will be restricted from moving past the min/max scale defined on the map service.
   * The unavailable range will be designated with a dashed line.
   */
  accessor layer: Layer | Sublayer | null | undefined;
  /**
   * The maximum scale of the active scale range. When the maxScale
   * reaches the [maxScaleLimit](https://developers.arcgis.com/javascript/latest/references/core/widgets/ScaleRangeSlider/#maxScaleLimit), the maxScale
   * value becomes 0 and there is no maximum scale set.
   */
  accessor maxScale: number;
  /** The lowest possible maximum scale value on the slider. */
  accessor maxScaleLimit: number;
  /**
   * The minimum scale of the active scale range. When the minScale
   * reaches the [minScaleLimit](https://developers.arcgis.com/javascript/latest/references/core/widgets/ScaleRangeSlider/#minScaleLimit), the minScale
   * value becomes 0 and there is no minimum scale.
   */
  accessor minScale: number;
  /** The highest possible minimum scale value on the slider. */
  accessor minScaleLimit: number;
  /**
   * The mode of the widget, indicating which slider thumbs can be adjusted.
   *
   * @default "range"
   * @since 4.29
   */
  accessor mode: "range" | "max-scale-only" | "min-scale-only";
  /**
   * The region that the scale thumbnails will focus on.
   * Each region comes from the [ISO 3166-1 alpha-2 code](https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes).
   * See [SupportedRegion](https://developers.arcgis.com/javascript/latest/references/core/widgets/ScaleRangeSlider/types/#SupportedRegion) for the list of regions that are currently supported.
   *
   * @default "US"
   */
  accessor region: SupportedRegion;
  /**
   * Indicates whether the world scale value is shown in the scale menu.
   *
   * @default false
   * @since 4.34
   */
  accessor showWorldValue: boolean;
  /**
   * A reference to the [MapView](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/) or [SceneView](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/).
   * Set this to link the widget to a specific view.
   */
  accessor view: MapViewOrSceneView | null | undefined;
  /**
   * The view model for this widget. This is a class that contains all the logic
   * (properties and methods) that controls this widget's behavior. See the
   * [ScaleRangeSliderViewModel](https://developers.arcgis.com/javascript/latest/references/core/widgets/ScaleRangeSlider/ScaleRangeSliderViewModel/) class to access
   * all properties and methods on the widget.
   */
  get viewModel(): ScaleRangeSliderViewModel;
  set viewModel(value: ScaleRangeSliderViewModelProperties);
  /**
   * 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.
   *
   * @example
   * scaleRangeSlider.visibleElements = {
   *   preview: false  // thumbnail preview of map will not be displayed
   * }
   */
  accessor visibleElements: VisibleElements;
}