import "@arcgis/map-components/components/arcgis-slider-scale-range";- Inheritance
- ArcgisSliderScaleRange→
HTMLElement
- Since
- ArcGIS Maps SDK for JavaScript 5.1
The Scale Range Slider component allows the user to set a minimum and maximum scale based on named scale ranges. When a layer is provided, the component's minScale and maxScale properties will be set to the scale range of the layer.
Demos
Properties
| Property | Attribute | Type |
|---|---|---|
| auto-destroy-disabled | ||
| reflected | disabled | |
| hide-max-scale-menu | ||
| hide-min-scale-menu | ||
| hide-preview | ||
| icon | ||
| label | ||
| | ||
| max-scale | ||
| max-scale-limit | ||
| min-scale | ||
| min-scale-limit | ||
| mode | "max-scale-only" | "min-scale-only" | "range" | |
| reference-element | ||
| region | ||
| show-world-value | ||
| readonly | | "disabled" | "ready" |
| |
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
- IconName
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
- Type
- Layer | Sublayer | SubtypeSublayer | undefined
When provided, the initial minScale and maxScale values will match the scale range within which the layer will render.
If a TileLayer with resampling disabled is provided,
the slider thumbs will not be allowed to move past the lods of the layer's tiling scheme.
If a MapImageLayer is provided, the same restrictions to the thumbs
will be applied via the min/max scale defined by the map service. The unavailable range will be designated with a dashed line.
maxScale
- Type
- number
The maximum scale of the active scale range.
- Attribute
- max-scale
- Default value
- 0
minScale
- Type
- number
The minimum scale of the active scale range.
- Attribute
- min-scale
- Default value
- 0
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 | undefined
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
showWorldValue
- Type
- boolean
Indicates whether the world scale value is shown in the scale menu.
- Attribute
- show-world-value
- Default value
- false
view
- Type
- LinkChartView | MapView | SceneView | 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-slider-scale-range component will be associated with a map or scene component rather than using theviewproperty.
Methods
| Method | Signature |
|---|---|
| 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 arcgisSliderScaleRange = document.createElement("arcgis-slider-scale-range");document.body.append(arcgisSliderScaleRange);await arcgisSliderScaleRange.componentOnReady();console.log("arcgis-slider-scale-range is ready to go!");
Events
| Name | Type |
|---|---|
| CustomEvent<{ name: "state" | "minScale" | "maxScale"; }> | |
arcgisChange
arcgisChange: CustomEvent<void> Fires when the thumb or range is released on the component. Use @arcgisInput for continuous updates during a drag.
arcgisInput
arcgisInput: CustomEvent<void> Fires continuously while the thumb or range is being dragged. This event can fire frequently; consider debouncing or throttling expensive work.
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.