ValuePickerSlider

// 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]
});

Property Overview

Property Details

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

• Slider

min Number

The minimum possible data/thumb value on the slider.

See also

• Slider

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.