arcgis-ticks | References | ArcGIS Maps SDK for JavaScript

ESM

import "@arcgis/common-components/components/arcgis-ticks";

Inheritance: ArcgisTicks→HTMLElement

Since: ArcGIS Maps SDK for JavaScript 5.0

The ticks component displays visual markers along a line to indicate scale, intervals, or specific values. It is often used in conjunction with the Slider component. Ticks help users understand the slider’s range and make more precise selections.

Tick placement is controlled by the mode, which defines how the values are parsed and translated into positions along the line. Tick positions are derived from the component’s min and max range, with optional non-linear scaling via interpolationExponent. Ticks can be displayed in vertical or horizontal layout, with optional showLabels and a showBaseline. The component can also be made interactive to respond to user clicks on individual ticks. The labelFormatter property allows customization of tick label formatting.

Demos

Example

The following example creates a vertical slider with ticks. The ticks are positioned at the end of the slider and displayed every 10 units from 0 to 100.

<arcgis-slider id="sliderComponent" min="0" max="100" show-range-labels values="50" layout="vertical">
   <arcgis-ticks slot="content-end" style="flex:1;"
     min="0" max="100"
     mode="value"
     show-labels
     label-placement="end"
     values="0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100"
     layout="vertical">
   </arcgis-ticks>
</arcgis-slider>

Properties

Property	Attribute	Type
interactive reflected	interactive	boolean
interpolationExponent	interpolation-exponent	number
labelFormatter		(value: number, defaultFormatter: (value: number) => string) => string \| null \| undefined
labelPlacement reflected	label-placement	"end" \| "start"
layout reflected	layout	Layout
max	max	number
min	min	number
mirrored reflected	mirrored	boolean
mode	mode	TickMode
showBaseline	show-baseline	boolean
showLabels	show-labels	boolean
values	values	TickValues

interactive

reflected Property

Type: boolean

When true, ticks are clickable and the component emits @arcgisTickClick when the user selects a tick.

See also

@arcgisTickClick

Attribute: interactive
Default value: false

interpolationExponent

Property

Type: number

The exponent used to interpolate the position of ticks along the component. A value of 0 indicates linear interpolation. Positive values indicate exponential interpolation, and negative values indicate logarithmic interpolation.

Set this property when the range of values is large and users need precision in the lower range of values (for an exponential interpolation), or in the higher range (for a logarithmic interpolation).

<arcgis-ticks interpolation-exponent={14} min={1} max={5518000} mode="value" values={[1, 11500, 5518000]} />

Attribute: interpolation-exponent
Default value: 0

labelFormatter

Property

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

Allows customizing how tick labels are formatted based on their numeric value.

Example

The following example formats tick labels as percentages.

const ticks = document.querySelector("arcgis-ticks");
ticks.labelFormatter = (value, defaultFormatter) => {
  return value + "%";
};

labelPlacement

reflected Property

Type: "end" | "start"

Determines whether the labels are placed before or after the ticks.

Attribute: label-placement
Default value: "end"

layout

reflected Property

Type: Layout

Determines the layout/orientation of the ticks component. By default, the ticks will render horizontally. When set to vertical, the ticks will render vertically.

Attribute: layout
Default value: "horizontal"

max

Property

Type: number

The component's maximum rendered value.

Attribute: max
Default value: 100

min

Property

Type: number

The component's minimum rendered value.

Attribute: min
Default value: 0

mirrored

reflected Property

Type: boolean

When true, the values are displayed from high to low.

Attribute: mirrored
Default value: false

mode

Property

Type: TickMode

The manner in which ticks are positioned along the component. It determines how values is interpreted.

count: Places a fixed number of ticks (specified in values) at equal intervals.
percent: Interprets values as percentages. If it's a single number, that number is the interval between ticks; if it's an array, the array specifies the percentage positions for ticks.
value: Places ticks only at the values listed in values.

See also

values

Attribute: mode
Default value: "count"

Examples

<!-- Place ticks at each value listed in `values` -->
<arcgis-slider min="0" max="100" show-range-labels values="20, 50">
  <arcgis-ticks
    slot="content-end" style="flex:1;"
    min="0" max="100"
    show-labels label-placement="end"
    mode="value"
    values="0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100">
  </arcgis-ticks>
</arcgis-slider>

In count mode, the values property specifies the number of ticks to render (not a list of tick values). For example, use 11 ticks to show 0–100 in intervals of 10 (0, 10, 20, ..., 100).

<!-- 11 ticks from 0 to 100 -->
<arcgis-slider min="0" max="100" show-range-labels values="20, 50">
  <arcgis-ticks
    slot="content-end" style="flex:1;"
    min="0" max="100"
    show-labels label-placement="end"
    mode="count"
    values="11">
  </arcgis-ticks>
</arcgis-slider>

In percent mode, values are percentages along the track. Use an array to place ticks at specific percentages, or a single number as a repeating interval.

<!-- Ticks at 0%, 25%, 50%, 75%, and 100% -->
<arcgis-slider min="0" max="200" show-range-labels values="50, 150">
  <arcgis-ticks
    slot="content-end" style="flex:1;"
    min="0" max="200"
    show-labels label-placement="end"
    mode="percent"
    values="0, 25, 50, 75, 100">
  </arcgis-ticks>
</arcgis-slider>

showBaseline

Property

Type: boolean

Indicates whether to render a line connecting the ticks.

Attribute: show-baseline
Default value: false

showLabels

Property

Type: boolean

Indicates whether to render labels for the ticks.

Attribute: show-labels
Default value: false

values

Property

Type: TickValues

Indicates where ticks are rendered along the component. This can be set as comma-separated numbers in the attribute (e.g., <arcgis-ticks values="10, 20, 30"></arcgis-ticks>) or programmatically as either a single number or an array of numbers (e.g., ticks.values = 10, ticks.values = [10, 20, 30]). See the description for mode for more information about how this property is interpreted by each mode.

See also

mode

Attribute: values

Methods

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

componentOnReady

inherited Method

Signature: componentOnReady (): Promise<this>

Inherited from: this

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

Returns: Promise<this>

Example

const arcgisTicks = document.createElement("arcgis-ticks");
document.body.append(arcgisTicks);
await arcgisTicks.componentOnReady();
console.log("arcgis-ticks is ready to go!");

Events

Name	Type
arcgisTickClick	CustomEvent<{ value: number; }>

arcgisTickClick

Event

arcgisTickClick: CustomEvent<{ value: number; }>

Fires when the user clicks on one of the ticks. This event is only emitted when the interactive property is set to true.

See also

interactive

Example

The following example listens for the arcgisTickClick event and logs the clicked tick's value.

const ticks = document.querySelector("arcgis-ticks");
ticks.addEventListener("arcgisTickClick", (event) => {
  console.log("Clicked tick value:", event.detail.value);
});

Styles

Name	Default	Description
--arcgis-ticks-tick-length		Specifies the length of the ticks.
--arcgis-ticks-tick-color		Specifies the color of the ticks.
--arcgis-ticks-gap		Specifies the gap between the ticks and labels.

--arcgis-ticks-tick-length

Style

Specifies the length of the ticks.

--arcgis-ticks-tick-color

Style

Specifies the color of the ticks.

--arcgis-ticks-gap

Style

Specifies the gap between the ticks and labels.