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

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[] |null |undefined

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[] |null |undefined

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

The maximum possible data/thumb value of the slider.

See also

min

Property
min Number |null |undefined

The minimum possible data/thumb value on the slider.

See also

minorTicks

Property
minorTicks Number[] |null |undefined

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 Boolean

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[] |null |undefined

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 VisibleElementsautocast

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 Accessor

The visible elements that are displayed within the slider component.

Property
thumbTooltip Boolean
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.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close