Range (Bootstrap)

Description

The Range control allows the input of a range of values between min and max. The result is returned as a string in value.

To add a control to your app, choose the control’s icon in the Toolbar, then position it on the Design Screen. Use the Property Editor to set the properties you need, then add functions to your code to respond to the events that come from the control.

This control uses the Bootstrap 5's Range control. It replaces the Slider (Bootstrap) control which was in Bootstrap 4. Unfortunately, the maintainer of that slider has not updated it for Bootstrap 5. While the Bootstrap 5 Range control is easier to use, it has less features.

Properties

Standard properties are supported, plus these, which can be set at Design Time:

value	The value of the control. Default is 50.
min	The minimum value. Integer. Default is 0.
max	The maximum value. Integer. Default is 100.
step	Increment steps between min and max. Integer. Default is 50.

Functions

The following options can be used at runtime:

hide()	Hide the slider
show()	Show the slider
disable()	Disables the slider and prevents the user from changing the value
enable()	Enables the slider

Events

Range1.onchange()

Called when the value of the control changes.

Example

// JavaScript

Range1.onchange = function () {
  Label1.value = Range1.value;
};

' Basic

function Range1_onchange()
  Label1.value = Range1.value
End function