// JavaScript
Range1.onchange = function () {
Label1.value = Range1.value;
};
Range (Bootstrap): Difference between revisions
Jump to navigation
Jump to search
(Created page with "file:SliderBS1.png file:SliderBS2.png == 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. <tabber> JavaScript= <synt...") |
No edit summary |
||
| Line 1: | Line 1: | ||
[[file: | [[file:Range.png]] | ||
== Description == | == Description == | ||
| Line 8: | Line 7: | ||
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. | 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. | 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. | ||
| Line 46: | Line 32: | ||
|- | |- | ||
| show()||Show the slider | | show()||Show the slider | ||
|- | |- | ||
| disable()||Disables the slider and prevents the user from changing the value | | disable()||Disables the slider and prevents the user from changing the value | ||
| Line 57: | Line 39: | ||
== Events == | == Events == | ||
{| class="wikitable" | {| class="wikitable" | ||
| Line 64: | Line 44: | ||
| Range1.onchange()|| Called when the value of the control changes. | | Range1.onchange()|| Called when the value of the control changes. | ||
|} | |} | ||
== Example == | == Example == | ||
Latest revision as of 14:50, 18 June 2024
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
' Basic
function Range1_onchange()
Label1.value = Range1.value
End function