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

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
LabelFormatter

A function used to format labels.

more details
ValuePickerSlider
Number[]

Slider tick labels.

more details
ValuePickerSlider
Number[]

The positions of major ticks.

more details
ValuePickerSlider
Number

The maximum possible data/thumb value of the slider.

more details
ValuePickerSlider
Number

The minimum possible data/thumb value on the slider.

more details
ValuePickerSlider
Number[]

The positions of minor ticks.

more details
ValuePickerSlider
Number

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

more details
ValuePickerSlider
Number[]

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

more details
ValuePickerSlider
String For ValuePickerSlider the type is always "slider". more detailsValuePickerSlider
VisibleElements

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

more details
ValuePickerSlider

Property Details

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

The maximum possible data/thumb value of the slider.

See also
min Number

The minimum possible data/thumb value on the slider.

See also
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 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 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 Stringreadonly

For ValuePickerSlider the type is always "slider".

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