Scale Range Slider

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

The ScaleRangeSlider 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`	`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`	`position`	`"bottom-leading" \| "bottom-left" \| "bottom-right" \| "bottom-trailing" \| "manual" \| "top-leading" \| "top-left" \| "top-right" \| "top-trailing"`
`referenceElement`	`reference-element`	`ArcgisLinkChart \| ArcgisMap \| ArcgisScene \| string`
`region`		`SupportedRegion`
`state` readonly	`state`	`"disabled" \| "ready"`

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). Search Calcite Icons for possible values.

Attribute: icon
Default value: "actual-size"

label

Property

label: string

The component'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

Property

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

Attribute: position
Default value: "bottom-left"

referenceElement

Property

referenceElement: ArcgisLinkChart | ArcgisMap | ArcgisScene | string

Attribute: reference-element

region

Property

region: SupportedRegion

The region that the scale thumbnails will focus on.

Default value: "US"

state

readonly

Property

state: "disabled" | "ready"

The current state of the widget.

Attribute: state
Default value: "disabled"

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.

Returns: Promise<void>

destroy

Method

destroy(): Promise<void>

Permanently destroy the component.

Returns: Promise<void>

Events

Event	Type
`arcgisPropertyChange`	`{ name: "state" \| "maxScale" \| "minScale"; }`
`arcgisReady`	`undefined`

arcgisPropertyChange

Event

arcgisPropertyChange: { name: "state" | "maxScale" | "minScale"; }

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

arcgisReady

Event

arcgisReady: undefined

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