arcgis-value-picker-slider | References | ArcGIS Maps SDK for JavaScript

ESM

import "@arcgis/common-components/components/arcgis-value-picker-slider";

Inheritance: ArcgisValuePickerSlider→HTMLElement

Demo

Properties

Property	Attribute	Type
autoDestroyDisabled	auto-destroy-disabled	boolean
canNext	can-next	boolean
canPlay	can-play	boolean
canPrevious	can-previous	boolean
currentValue	current-value	number \| undefined
disabled	disabled	boolean
labelFormatter		(value: number, defaultFormatter: (value: number) => string) => string \| null \| undefined
labels		number[] \| undefined
layout reflected	layout	Layout \| undefined
majorTicks		number[] \| undefined
max	max	number \| undefined
min	min	number \| undefined
minorTicks		number[] \| undefined
mirrored	mirrored	boolean
steps		number[] \| undefined

autoDestroyDisabled

Property

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

canNext

Property

Type: boolean

Determines whether the user can interact with the next button. This property is automatically set to false when the index of currentValue matches the last index of steps. Regardless of the layout property's value, the slider thumb will move in the direction that the next button is pointing. This means that when the slider is visually flipped (layout is "horizontal" and mirrored is true, or layout is "vertical" and mirrored is false), this property becomes false when currentValue is equal to the first index of steps rather than the last.

Attribute: can-next
Default value: false

Example

const valuePicker = document.querySelector("arcgis-value-picker");
const valuePickerSlider = document.querySelector("arcgis-value-picker-slider");

valuePickerSlider.steps = [1, 2, 3];
valuePickerSlider.currentValue = 3;

if (valuePickerSlider.canNext) {
  valuePicker.next();
} else {
  console.log("Cannot step forward."); // this line will execute
}

canPlay

Property

Type: boolean

Determines whether the user can interact with the play/pause button.

Attribute: can-play
Default value: false

canPrevious

Property

Type: boolean

Determines whether the user can interact with the previous button. This property is automatically set to false when the index of currentValue matches the first index of steps. Regardless of the layout property's value, the slider thumb will move in the direction that the previous button is pointing. This means that when the slider is visually flipped (layout is "horizontal" and mirrored is true, or layout is "vertical" and mirrored is false), this property becomes false when currentValue is equal to the last index of steps rather than the first.

Attribute: can-previous
Default value: false

Example

const valuePicker = document.querySelector("arcgis-value-picker");
const valuePickerSlider = document.querySelector("arcgis-value-picker-slider");

// `steps` will be rendered on a vertical track where "3" is the topmost value.
// The previous button (pointing upwards) will fail to increment the index of `steps` by 1.

valuePickerSlider.steps = [1, 2, 3];
valuePickerSlider.currentValue = 1;
valuePickerSlider.mirrored = false;
valuePicker.layout = "vertical";

if (valuePickerSlider.canPrevious) {
  valuePicker.previous(); // this line will execute
} else {
  console.log("Cannot step upward.");
}

currentValue

Property

Type: number | undefined

The value of the currently selected index in the slider's steps. If this property is not assigned by the user, it will default to the last index of steps.

Attribute: current-value

disabled

Property

Type: boolean

When set to true, the user may not interact with the slider. Note that if the ValuePicker's arcgis-value-picker.disabled property is mutated, this property will update to match it.

Attribute: disabled
Default value: false

labelFormatter

Property

Type: (value: number, defaultFormatter: (value: number) => string) => string | null | undefined

A function used to format labels. Overrides the default label formatter.

Example

// Display a label at every step formatted as a percentage.

const valuePickerSlider = document.querySelector("arcgis-value-picker-slider");
valuePickerSlider.steps = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
valuePickerSlider.labels = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
valuePickerSlider.labelFormatter = (value) => `${value}%`;

labels

Property

Type: number[] | undefined

Determines where along the slider track labels should be placed. Labels will be formatted by the labelFormatter property.

Example

// Display a label at every other step

const valuePickerSlider = document.querySelector("arcgis-value-picker-slider");
valuePickerSlider.steps = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
valuePickerSlider.labels = [0, 20, 40, 60, 80, 100];

layout

reflected Property

Type: Layout | undefined

Determines whether the slider should be oriented horizontally or vertically. Note that if arcgis-value-picker.layout on the Value Picker component is mutated, this property will update to match it. The UI will behave as if the indices of steps will ascend left to right, or bottom to top on a horizontal or vertical layout, respectively. If you wish for the slider to be visually mirrored, set the mirrored property to true. This will also make the 'next' button responsible for stepping backwards to the previous index of steps, and 'previous' responsible for advancing to the next index of steps.

See also

arcgis-value-picker.layout

Attribute: layout
Default value: "horizontal"

Example

// Display a vertical slider with `steps` ascending bottom to top. In this instance, the 'next'
// button (pointing downwards) will bring `currentValue` closer to 0 to match the slider's appearance.

const valuePickerSlider = document.querySelector("arcgis-value-picker-slider");
valuePickerSlider.steps = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
valuePickerSlider.currentValue = 100;
valuePickerSlider.layout = "vertical";

// Display a horizontal slider with `steps` ascending right to left. Since `mirrored` is true,
// the slider will show `currentValue` decreasing from 100 to 0 as the 'next' button (pointing to the right) is pressed.

const valuePickerSlider = document.querySelector("arcgis-value-picker-slider");
valuePickerSlider.steps = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
valuePickerSlider.currentValue = 100;
valuePickerSlider.layout = "horizontal";
valuePickerSlider.mirrored = true;

majorTicks

Property

Type: number[] | undefined

Positions along the slider track rendered as long tick marks under the track.

max

Property

Type: number | undefined

The greatest possible value on the slider track. If this property is not set, it will be inferred from the last index of steps.

Attribute: max

min

Property

Type: number | undefined

The smallest possible value on the slider track. If this property is not set, it will be inferred from the first index of steps.

Attribute: min

minorTicks

Property

Type: number[] | undefined

Positions along the slider track rendered as short tick marks under the track.

mirrored

Property

Type: boolean

When true, the slider will display its steps from right to left, or top to bottom, depending on the value of layout. This inverts the direction of the slider.

Attribute: mirrored
Default value: false

steps

Property

Type: number[] | undefined

Positions along the slider track between min and max that the slider thumb will snap to when interacted with.

Methods

Method	Signature
componentOnReady inherited	componentOnReady(): Promise<this>
destroy	destroy(): Promise<void>

componentOnReady

inherited Method

Signature: componentOnReady (): Promise<this>

Creates a promise that resolves once the component is fully loaded.

Returns: Promise<this>

Example

const arcgisValuePickerSlider = document.createElement("arcgis-value-picker-slider");
document.body.append(arcgisValuePickerSlider);
await arcgisValuePickerSlider.componentOnReady();
console.log("arcgis-value-picker-slider is ready to go!");

destroy

Method

Signature: destroy (): Promise<void>

Permanently destroys the component.

Returns: Promise<void>

Events

Name	Type
arcgisPropertyChange	CustomEvent<{ name: "canNext" \| "canPlay" \| "canPrevious" \| "currentValue"; }>

arcgisPropertyChange

Event

arcgisPropertyChange: CustomEvent<{ name: "canNext" | "canPlay" | "canPrevious" | "currentValue"; }>