Range (Bootstrap)

From NSB App Studio
Jump to navigation Jump to search


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.


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.


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


Range1.onchange() Called when the value of the control changes.


// JavaScript

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

' Basic

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