arcgis-ticks | References | ArcGIS Maps SDK for JavaScript

ESM

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

Inheritance:: ArcgisTicks→PublicLitElement

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 none-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 vertical ticks displayed at every 10 units from 0 to 100. The ticks are labeled and positioned on the end side of the slider.

<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) => nullish \| string) \| 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) => nullish | string) | 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 mode or method of positioning ticks along the component. It drives how values is interpreted.

count: Places a fixed number of ticks (provided in the values property) at equal distances from each other.
percent: values is interpreted as percentage. If values is a number, it indicates the interval between ticks. If it is an array, it indicates the percentage values at which to place the ticks.
value: Indicates that ticks will only be placed at the values specified in the property.

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, values is the number of ticks to render (not a list of tick values). For example, use 11 ticks to show 0–100 in steps 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 will be rendered along the component. 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: PublicLitElement

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

Returns: Promise<this>

Example

const arcgisTicks = document.querySelector("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.