Range Slider

Last update: Edit

1 Introduction

The Range Slider widget can be used to change the range of values using a slider.

1.1 Features

  • Adjust lower bound and upper bound values on the slider
  • Execute a microflow when a slider value is changed or clicked
  • Show or hide a tooltip upon hover
  • Render range slider with different Bootstrap colors

2 Configuration

On the Data source tab, configure these properties:

  • Range minimum attribute – the attribute that contains the minimum slider value; if not provided, the Default minimum value is used
  • Range maximum attribute – the attribute that contains the maximum slider value; if not provided, the Default maximum value is used
  • Selected minimum attribute – the attribute that contains the minimum bound slider value
  • Selected maximum attribute – the attribute that contains the maximum bound slider value

3 Usage

3.1 Two Values vs. One Value

The Range Slider widget allows you to set two values between two bounds (the minimum value and maximum value). However, if only one value needs to be set between two bounds, you should use the Slider widget instead.

3.2 Sample Slider

In Studio Pro, place the widget in the context of an object that has attributes for the maximum value, minimum value, lower bound value, and upper bound value. The maximum and minimum values determine the range within which the range slider values can be adjusted.

The step value determines the next point to shift to when sliding (meaning, the interval between points or numbers):

For the step value, the difference between the maximum value and the minimum value should be divisible by 2 (as in, (maximumValue - minimumValue) % 2 = 0).