value

Sets or gets the value(s) of a range slider's handle(s).

Description

The value of a range slider refers to the currently selected value(s) of the range slider represented by the handle(s).
The value can be one of 2 types:

Number: Use a number to set the selected value of a single-handle range slider. The selected value is bound by the min and the max limits of the range slider.
Array of Numbers: Use an array of 2 numbers, a minimum and maximum value, to set the selected values of a 2-handle range slider. The selected values are bound by the min and the max limits of the range slider.

Type:

number

Array<number>

Read & Write

Was this helpful?

Get a range slider's value

Copy Code

1let rangeSliderValue = $w('#myRangeSlider').value; // [10,50]

Set a range slider's value

Copy Code

1$w('#myRangeSlider').value = [10,50];

Toggle a range slider's value type

This example demonstrates how to toggle between a range slider with two handles and a range slider with a sinlge-handle.

Copy Code

1$w('#valueToggleButton').onClick(() => {
2  let numberVal = $w('#myRangeSlider').max/2;
3  let arrayVal = [$w('#myRangeSlider').min, $w('#myRangeSlider').max]
4
5  if (Array.isArray($w('#myRangeSlider').value)){
6      $w('#myRangeSlider').value = numberVal;
7  }
8  else {
9      $w('#myRangeSlider').value = arrayVal;
10  }
11})