require(["esri/widgets/ValuePicker/ValuePickerSlider"], (ValuePickerSlider) => { /* code goes here */ });
import ValuePickerSlider from "@arcgis/core/widgets/ValuePicker/ValuePickerSlider.js";
esri/widgets/ValuePicker/ValuePickerSlider
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.
// 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
-
Parameterproperties Objectoptional
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. | 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
PropertylabelFormatFunction 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] });
-
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] });
-
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] });
-
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
Propertyreversed 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] });
-
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
Propertytype Stringreadonly -
For ValuePickerSlider the type is always "slider".
-
visibleElements
PropertyvisibleElements 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] });