import "@arcgis/map-components/components/arcgis-scale-range-slider";- Inheritance:
- ArcgisScaleRangeSlider→
PublicLitElement
- Since
- ArcGIS Maps SDK for JavaScript 4.28
The Scale Range Slider component allows the user to set a minimum and maximum scale based on named scale ranges.
Demo
Properties
| Property | Attribute | Type |
|---|---|---|
auto-destroy-disabled | ||
disabled reflected | disabled | |
hide-preview | ||
hide-scale-menus-max-scale-menu | ||
hide-scale-menus-min-scale-menu | ||
icon | Icon["icon"] | |
label | ||
| ||
max-scale | ||
max-scale-limit | ||
min-scale | ||
min-scale-limit | ||
mode | "range" | "max-scale-only" | "min-scale-only" | |
reference-element | ||
region | ||
show-world-value | ||
state readonly | | |
|
autoDestroyDisabled
- Type
- boolean
If true, the component will not be destroyed automatically when it is disconnected from the document. This is useful when you want to move the component to a different place on the page, or temporarily hide it. If this is set, make sure to call the destroy() method when you are done to prevent memory leaks.
- Attribute
- auto-destroy-disabled
- Default value
- false
disabled
- Type
- boolean
When true, the component is visually withdrawn and cannot receive user interaction.
- Attribute
- disabled
- Default value
- false
icon
- Type
- Icon["icon"]
Icon which represents the component. Typically used when the component is controlled by another component (e.g. by the Expand component).
- See also
- Attribute
- icon
- Default value
- "actual-size"
layer
When provided, the initial minScale and 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 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.
maxScale
- Type
- number
The maximum scale of the active scale range. When the maxScale reaches the maxScaleLimit, the maxScale value becomes 0 and there is no maximum scale set.
- Attribute
- max-scale
maxScaleLimit
- Type
- number
The lowest possible maximum scale value on the slider.
- Attribute
- max-scale-limit
minScale
- Type
- number
The minimum scale of the active scale range. When the minScale reaches the minScaleLimit, the minScale value becomes 0 and there is no minimum scale.
- Attribute
- min-scale
minScaleLimit
- Type
- number
The highest possible minimum scale value on the slider.
- Attribute
- min-scale-limit
referenceElement
- Type
- ArcgisReferenceElement | string | undefined
By assigning the id attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.
- Attribute
- reference-element
region
- Type
- SupportedRegion
The region that the scale thumbnails will focus on. Each region comes from the ISO 3166-1 alpha-2 code. See SupportedRegion for the list of regions that are currently supported.
- Attribute
- region
- Default value
- "US"
showWorldValue
- Type
- boolean
- Since
- ArcGIS Maps SDK for JavaScript 4.34
Indicates whether the world scale value is shown in the scale menu.
- Attribute
- show-world-value
- Default value
- false
view
- Type
- MapViewOrSceneView | null | undefined
The view associated with the component.
Note: The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this
viewproperty which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-scale-range-slider component will be associated with a map or scene component rather than using theviewproperty.
Methods
| Method | Signature |
|---|---|
componentOnReady inherited | componentOnReady(): Promise<this> |
destroy(): Promise<void> |
componentOnReady
- Signature
-
componentOnReady (): Promise<this>
Creates a promise that resolves once the component is fully loaded.
- Returns
- Promise<this>
Example
const arcgisScaleRangeSlider = document.querySelector("arcgis-scale-range-slider");document.body.append(arcgisScaleRangeSlider);await arcgisScaleRangeSlider.componentOnReady();console.log("arcgis-scale-range-slider is ready to go!");Events
| Name | Type |
|---|---|
| CustomEvent<{ name: "state" | "minScale" | "maxScale"; }> | |
arcgisPropertyChange
arcgisPropertyChange: CustomEvent<{ name: "state" | "minScale" | "maxScale"; }> Emitted when the value of a property is changed. Use this to listen to changes to properties.
arcgisReady
arcgisReady: CustomEvent<void> Emitted when the component associated with a map or scene view is ready to be interacted with.