ValuePickerSlider | API Reference | ArcGIS Maps SDK for JavaScript 4.31

This class represents a slider component that can be assigned to a component property of a ValuePicker widget. See Using the slider component to navigate numeric values section for more information how to set this up.

Example

// Create a value picker with a slider component show percentages from 0 to 100.
const valuePickerSlider = new ValuePickerSlider({
  min: 0,
  max: 100,
  steps: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
  minorTicks: [5, 15, 25, 35, 45, 55, 65, 75, 85, 95],
  majorTicks: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
  labels: [0, 20, 40, 60, 80, 100],
  labelFormatFunction: (value) => `${value}%`
});
const valuePicker = new ValuePicker({
  component: valuePickerSlider,
  values: [50]
});

Constructors

ValuePickerSlider Constructor new ValuePickerSlider(properties)

Parameter

properties Object

optional

See the properties for a list of all the properties that may be passed into the constructor.

Property Overview

Type	Summary	Class
LabelFormatter	A function used to format labels.	ValuePickerSlider
Number []	Slider tick labels.	ValuePickerSlider
Number []	The positions of major ticks.	ValuePickerSlider
Number	The maximum possible data/thumb value of the slider.	ValuePickerSlider
Number	The minimum possible data/thumb value on the slider.	ValuePickerSlider
Number []	The positions of minor ticks.	ValuePickerSlider
Number	When true, slider values will ascend right to left and bottom to top when horizontal and vertical respectively.	ValuePickerSlider
Number []	Positions along the slider that the thumb will snap to when interacted with.	ValuePickerSlider
String	For ValuePickerSlider the type is always "slider".	ValuePickerSlider
VisibleElements	This property provides the ability to display or hide the individual elements of the widget.	ValuePickerSlider

Property Details

labelFormatFunction Property labelFormatFunction LabelFormatter

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

Default Value:null

See also

Slider

Example

// Display a label for each step. Each label will display the value as a localized distance in abbreviated
// kilometers (e.g. "90 km").
const formatter = new Intl.NumberFormat(undefined, { style: "unit", unit: "kilometer" });
const steps = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
const valuePicker = new ValuePicker({
  component: new ValuePickerSlider({
    min: 0,
    max: 100,
    steps,
    labels: steps,
    labelFormatFunction: (value) => formatter.format(value)
  },
  values: [0]
});

labels Property labels Number[]

Slider tick labels.

Default Value:null

Example

// The assigned slider ranges in value from 0 to 100%. Steps are located at every 10% however labels are spaced very 20%.
const valuePicker = new ValuePicker({
  component: new ValuePickerSlider({
    min: 0,
    max: 100,
    steps: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
    labels: [0, 20, 40, 60, 80, 100],
    labelFormatFunction: (value) => `${value}%`
  },
  values: [0]
});

majorTicks Property majorTicks Number[]

The positions of major ticks. Minor ticks are represented as long label-less tick marks.

Default Value:null

Example

// Create ValuePicker with steps and minor ticks every 10 units from 0 to 100 and major ticks every 20.
const valuePicker = new ValuePicker({
  component: new ValuePickerSlider({
    min: 0,
    max: 100,
    steps: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
    minorTicks: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
    majorTicks: [0, 20, 40, 60, 80, 100]
  },
  values: [0]
});

max Property max Number

The maximum possible data/thumb value of the slider.

See also

Slider

min Property min Number

The minimum possible data/thumb value on the slider.

See also

Slider

minorTicks Property minorTicks Number[]

The positions of minor ticks. Minor ticks are represented as short label-less tick marks.

Default Value:null

Example

// Create ValuePicker with steps and minor ticks every 10 units from 0 to 100.
const valuePicker = new ValuePicker({
  component: new ValuePickerSlider({
    min: 0,
    max: 100,
    steps: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
    minorTicks: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
  },
  values: [0]
});

reversed Property reversed Number

When true, slider values will ascend right to left and bottom to top when horizontal and vertical respectively.

Default Value:false

Example

// Create a horizontal ValuePicker with slider values in descending order.
const valuePicker = new ValuePicker({
  layout: "horizontal",
  component: new ValuePickerSlider({
    min: 0,
    max: 100,
    reversed: true
  },
  values: [0]
});

steps Property steps Number[]

Positions along the slider that the thumb will snap to when interacted with.

Default Value:null

Example

// Create a ValuePicker with a slider showing a date range from 1600 to 1900.
const dates = [
  new Date(1600, 0, 1),
  new Date(1700, 0, 1),
  new Date(1800, 0, 1),
  new Date(1900, 0, 1)
];

const valuePicker = new ValuePicker({
  component: new ValuePickerSlider({
    min: dates[0].getTime(),
    max: dates[dates.length - 1].getTime(),
    steps: dates.map((date) => date.getTime()),
    labels: dates.map((date) => date.getTime()),
    labelFormatFunction: (epoch) => new Date(epoch).toDateString()
  },
  values: [0]
});

type Property type Stringreadonly

For ValuePickerSlider the type is always "slider".

visibleElements Property visibleElements VisibleElements

This property provides the ability to display or hide the individual elements of the widget.

Example

// Create a ValuePicker widget with a slider and a thumb tooltip.
const valuePicker = new ValuePicker({
  component: new ValuePickerSlider({
    min: 0,
    max: 100,
    visibleElements: {
      thumbTooltip: true
    }
  },
  values: [0]
});

Type Definitions

VisibleElements Type Definition VisibleElements Object

The visible elements that are displayed within the slider component.

Property: thumbTooltip Boolean

optional
Default Value:false

When set to true, the current value is displayed in a permanent tooltip directly over the slider's thumb.