import type { Bounds, LabelInfos, InputType, SliderTickMode, TickCreatedFunction } from "@arcgis/core/widgets/Slider/types.js";Type definitions
Bounds
- Since
- ArcGIS Maps SDK for JavaScript 5.0
Represents the effective bounds of the slider.
SliderTickMode
- Since
- ArcGIS Maps SDK for JavaScript 5.0
- Type
- "count" | "percent" | "step" | "position"
TickCreatedFunction
- Since
- ArcGIS Maps SDK for JavaScript 5.0
Function that fires each time a tick is created. It provides you access to each tick
element so you can add custom CSS and attach event listeners to individual ticks. This function should be set to the
tickCreatedFunction property of the TickConfig.
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| value | The value of the slider where the tick is rendered. | | |
| tickElement | The HTMLElement representing the tick. You can add or modify the default style of individual ticks by adding CSS classes to this element. You can also add custom behavior to ticks by attaching event listeners to individual elements. | | |
| labelElement | The HTMLElement representing the label of the tick. You can add or modify the default style of the tick's labels by adding CSS classes to this element. You can also add custom behavior to tick labels by attaching event listeners to individual elements. | |
- Returns
- void
ThumbCreatedFunction
- Since
- ArcGIS Maps SDK for JavaScript 5.0
Function that executes each time a thumb is created on the slider. This function should be set to the Slider.thumbCreatedFunction property.
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| index | The index of the thumb when the Slider was constructed. | | |
| value | The value of the slider where the thumb is rendered. | | |
| thumbElement | The HTMLElement representing the thumb. You can add or modify the default style of individual thumbs by adding CSS classes to this element. You can also add custom behavior to thumbs by attaching event listeners to individual elements. | | |
| labelElement | The HTMLElement representing the label of the thumb. You can add or modify the default style of the thumb's labels by adding CSS classes to this element. You can also add custom behavior to thumb labels by attaching event listeners to individual elements. | |
- Returns
- void
InputCreatedFunction
- Since
- ArcGIS Maps SDK for JavaScript 5.0
Function that executes each time an input element is created. It allows the developer to validate a user's manually entered slider thumb values. This function should be set to the Slider.inputCreatedFunction property.
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| inputElement | The HTMLInputElement allowing the user to manually input
slider thumb values. You can customize this element to validate user input, for example by setting
the | | |
| type | The type of input created. | | |
| thumbIndex | The index of the thumb corresponding to the input element. | |
- Returns
- void
TickConfig
- Since
- ArcGIS Maps SDK for JavaScript 5.0
Object specification for configuring ticks on the slider. An array of these objects should be set on the Slider.tickConfigs property.
mode
- Type
- SliderTickMode
- Since
- ArcGIS Maps SDK for JavaScript 5.0
The mode or method of positioning ticks along the slider track. See the table below for a list of possible values.
| Possible Value | Description |
|---|---|
| count | Places a fixed number of ticks (provided in the values property) at equal distances from each other below the slider track. |
| percent | When set, and a single number is set on the values property, ticks will be placed at the specified percentage interval along the length of the slider. For example, when mode is percent and values is 5, then 20 ticks will be placed below the slider track (at 5-percent intervals from each other). If an array of values is provided, the values are interpreted as percentages along the slider. So if values is [10, 50, 90], then three ticks will be placed below the track; one at the midway point, and two 10 percent of the length from either end of the slider. |
| position | Indicates that ticks will only be placed at the values specified in the values property. |
tickCreatedFunction
- Type
- TickCreatedFunction | undefined
- Since
- ArcGIS Maps SDK for JavaScript 5.0
Callback that fires for each tick. You can override default behaviors and styles with this property.
labelFormatFunction
- Type
- LabelFormatFunction | undefined
- Since
- ArcGIS Maps SDK for JavaScript 5.0
Callback for formatting tick labels.
- Examples
- // places 25 ticks on the slider track// evenly spaced from one anotherslider.tickConfigs = [{mode: "count",values: 25}];// places ticks spanning the width of// the slider at 20% intervals from one another// this is the equivalent of setting mode to 'count'// and the values to 5.slider.tickConfigs = [{mode: "percent",values: 20}];// Places three ticks on the slider: one positioned// 10% of the width from the start (or min value), another// directly in the middle (50% from the start), and// another 90% of the width from the start of the slider.// Because the values are %s the values are always relative// regardless of the range of the slider values.slider.tickConfigs = [{mode: "percent",values: [ 10, 50, 90 ]}];// Places 5 ticks on the slider at the slider values// provided below. These are absolute positions.slider.tickConfigs = [{mode: "position",values: [ 0, 5, 10, 15, 20 ]}];// Places a single tick at the location of the value of 5.slider.tickConfigs = [{mode: "position",values: 5}];// Renders three groups of ticks. The first is a basic set// of 25 ticks. The second places 4 ticks and adds custom// CSS classes to modify their styling. The third adds// a click event handler to the tick labels.slider.tickConfigs = [{mode: "count",values: 25}, {mode: "percent",values: [12.5, 37.5, 62.5, 87.5],labelsVisible: true,tickCreatedFunction: function(initialValue, tickElement, labelElement) {tickElement.classList.add("mediumTicks");labelElement.classList.add("mediumLabels");}}, {mode: "count",values: 5,labelsVisible: true,tickCreatedFunction: function(initialValue, tickElement, labelElement) {tickElement.classList.add("largeTicks");labelElement.classList.add("largeLabels");labelElement.onclick = function() {const newValue = labelElement["data-value"];slider.values = [ newValue ];};}}];
MaxChangeEvent
- Since
- ArcGIS Maps SDK for JavaScript 5.0
oldValue
- Type
- number
- Since
- ArcGIS Maps SDK for JavaScript 5.0
The former Slider.max value (or bound) of the slider.
value
- Type
- number
- Since
- ArcGIS Maps SDK for JavaScript 5.0
The value of the Slider.max (or bound) of the slider when the event is emitted.
MinChangeEvent
- Since
- ArcGIS Maps SDK for JavaScript 5.0
oldValue
- Type
- number
- Since
- ArcGIS Maps SDK for JavaScript 5.0
The former Slider.min value (or bound) of the slider.
value
- Type
- number
- Since
- ArcGIS Maps SDK for JavaScript 5.0
The the Slider.min value (or bound) of the slider when the event is emitted.
ThumbClickEvent
- Since
- ArcGIS Maps SDK for JavaScript 5.0
value
- Type
- number
- Since
- ArcGIS Maps SDK for JavaScript 5.0
The value of the thumb when the event is emitted.
ThumbChangeEvent
- Since
- ArcGIS Maps SDK for JavaScript 5.0
index
- Type
- number
- Since
- ArcGIS Maps SDK for JavaScript 5.0
The 0-based index of the updated thumb position.
oldValue
- Type
- number
- Since
- ArcGIS Maps SDK for JavaScript 5.0
The former value of the thumb before the change was made.
value
- Type
- number
- Since
- ArcGIS Maps SDK for JavaScript 5.0
The value of the thumb when the event is emitted.
ThumbDragEvent
- Since
- ArcGIS Maps SDK for JavaScript 5.0
index
- Type
- number
- Since
- ArcGIS Maps SDK for JavaScript 5.0
The 0-based index of the updated thumb position.
value
- Type
- number
- Since
- ArcGIS Maps SDK for JavaScript 5.0
The value of the thumb when the event is emitted.
TickClickEvent
- Since
- ArcGIS Maps SDK for JavaScript 5.0
value
- Type
- number
- Since
- ArcGIS Maps SDK for JavaScript 5.0
The approximate value that the tick represents on the slider track.
configIndex
- Type
- number
- Since
- ArcGIS Maps SDK for JavaScript 5.0
The 0-based index of the associated configuration provided in Slider.tickConfigs.
groupIndex
- Type
- number
- Since
- ArcGIS Maps SDK for JavaScript 5.0
The 0-based index of the tick and/or group (associated label) relative to other ticks in the same configuration.
TrackClickEvent
- Since
- ArcGIS Maps SDK for JavaScript 5.0
value
- Type
- number
- Since
- ArcGIS Maps SDK for JavaScript 5.0
The approximate value of the slider at the location of the click event.
SegmentClickEvent
- Since
- ArcGIS Maps SDK for JavaScript 5.0
index
- Type
- number
- Since
- ArcGIS Maps SDK for JavaScript 5.0
The 1-based index of the segment on the slider.
value
- Type
- number
- Since
- ArcGIS Maps SDK for JavaScript 5.0
The approximate value of the slider at the location of the click event.
SegmentDragEvent
- Since
- ArcGIS Maps SDK for JavaScript 5.0
index
- Type
- number
- Since
- ArcGIS Maps SDK for JavaScript 5.0
The 1-based index of the segment in the slider.