Scale Range Slider

ESM:

Use dark colors for code blocksCopy
import "@arcgis/map-components/components/arcgis-scale-range-slider";

CDN:

No specific import is needed for this component.

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
`autoDestroyDisabled`	`auto-destroy-disabled`	`boolean`
`disabled` reflected	`disabled`	`boolean`
`hidePreview`	`hide-preview`	`boolean`
`hideScaleMenusMaxScaleMenu`	`hide-scale-menus-max-scale-menu`	`boolean`
`hideScaleMenusMinScaleMenu`	`hide-scale-menus-min-scale-menu`	`boolean`
`icon`	`icon`	`string`
`label`	`label`	`string`
`layer`		`Layer \| Sublayer`
`maxScale`	`max-scale`	`number`
`maxScaleLimit`	`max-scale-limit`	`number`
`minScale`	`min-scale`	`number`
`minScaleLimit`	`min-scale-limit`	`number`
`mode`	`mode`	`"max-scale-only" \| "min-scale-only" \| "range"`
`position` deprecated	`position`	`"bottom-leading" \| "bottom-left" \| "bottom-right" \| "bottom-trailing" \| "manual" \| "top-leading" \| "top-left" \| "top-right" \| "top-trailing"`
`referenceElement`	`reference-element`	`HTMLArcgisLinkChartElement \| HTMLArcgisMapElement \| HTMLArcgisSceneElement \| string`
`region`		`SupportedRegion`
`showWorldValue`	`show-world-value`	`boolean`
`state` readonlyreflected	`state`	`"disabled" \| "ready"`
`view`		`MapView \| SceneView`

autoDestroyDisabled

Property

autoDestroyDisabled: 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

Property

disabled: boolean

When true, sets the widget to a disabled state so the user cannot interact with it.

Attribute: disabled
Default value: false

hidePreview

Property

hidePreview: boolean

Attribute: hide-preview
Default value: false

hideScaleMenusMaxScaleMenu

Property

hideScaleMenusMaxScaleMenu: boolean

Attribute: hide-scale-menus-max-scale-menu
Default value: false

hideScaleMenusMinScaleMenu

Property

hideScaleMenusMinScaleMenu: boolean

Attribute: hide-scale-menus-min-scale-menu
Default value: false

icon

Property

icon: string

Icon which represents the component. Typically used when the component is controlled by another component (e.g. by the Expand component).

See also

Calcite Icons

Attribute: icon
Default value: "actual-size"

label

Property

label: string

The widget's default label.

Attribute: label

layer

Property

layer: Layer | Sublayer

When provided, the initial minScale and maxScale values will match the layer's.

maxScale

Property

maxScale: number

The maximum scale of the active scale range.

Attribute: max-scale

maxScaleLimit

Property

maxScaleLimit: number

The lowest possible maximum scale value on the slider.

Attribute: max-scale-limit

minScale

Property

minScale: number

The minimum scale of the active scale range.

Attribute: min-scale

minScaleLimit

Property

minScaleLimit: number

The highest possible minimum scale value on the slider.

Attribute: min-scale-limit

mode

Property

mode: "max-scale-only" | "min-scale-only" | "range"

The mode of the widget, indicating which slider thumbs can be adjusted.

Attribute: mode
Default value: "range"

position

deprecatedProperty

position: "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"

Deprecatedsince 4.34, use slot instead.

Attribute: position

referenceElement

Property

referenceElement: HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string

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.

See also

Associate components with a Map or Scene component

Attribute: reference-element

region

Property

region: SupportedRegion

The region that the scale thumbnails will focus on.

Default value: "US"

showWorldValue

Property

showWorldValue: boolean

ArcGIS Maps SDK for JavaScript 4.34

Scale Range Slider since 4.28, showWorldValue added at 4.34.

Indicates whether the world scale value is shown in the scale menu.

Attribute: show-world-value
Default value: false

state

readonly

Property

state: "disabled" | "ready"

The current state of the component.

Attribute: state
Default value: "disabled"

view

Property

view: MapView | SceneView

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 view property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the Scale Range Slider component will be associated with a map or scene component rather than using the view property.

Methods

Method	Signature
`componentOnReady`	`componentOnReady(): Promise<void>`
`destroy`	`destroy(): Promise<void>`

componentOnReady

Method

componentOnReady(): Promise<void>

Create a promise that resolves once component is fully loaded.

Example

Use dark colors for code blocksCopy
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!");

Returns: Promise<void>

destroy

Method

destroy(): Promise<void>

Permanently destroy the component.

Returns: Promise<void>

Events

Event	Type
`arcgisPropertyChange`	`CustomEvent<{ name: "state" \| "maxScale" \| "minScale"; }>`
`arcgisReady`	`CustomEvent<void>`

arcgisPropertyChange

Event

arcgisPropertyChange: CustomEvent<{ name: "state" | "maxScale" | "minScale"; }>

Emitted when the value of a property is changed. Use this to listen to changes to properties.

arcgisReady

Event

arcgisReady: CustomEvent<void>

Emitted when the component associated with a map or scene view is ready to be interacted with.