ValuePickerSlider

AMD: require(["esri/widgets/ValuePicker/ValuePickerSlider"], (ValuePickerSlider) => { /* code goes here */ });
ESM: import ValuePickerSlider from "@arcgis/core/widgets/ValuePicker/ValuePickerSlider.js";
Class: esri/widgets/ValuePicker/ValuePickerSlider
Since: ArcGIS Maps SDK for JavaScript 4.27

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

Name Type Summary Class

A function used to format labels.

ValuePickerSlider

Slider tick labels.

ValuePickerSlider

The positions of major ticks.

ValuePickerSlider

The maximum possible data/thumb value of the slider.

ValuePickerSlider

The minimum possible data/thumb value on the slider.

ValuePickerSlider

The positions of minor ticks.

ValuePickerSlider

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

ValuePickerSlider

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

ValuePickerSlider
For ValuePickerSlider the type is always "slider". ValuePickerSlider

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
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

min

Property
min Number

The minimum possible data/thumb value on the slider.

See also

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.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.