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.

// JavaScript
Range1.onchange = function() {

' Basic
Function Range1_input_onchange()

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
getElement()	Get the div slider element
destroy()	Properly clean up and remove the slider instance
disable()	Disables the slider and prevents the user from changing the value
enable()	Enables the slider

Events

Note: Event names are non standard, and normal events do not apply.

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