Range (Bootstrap): Difference between revisions

From NSB App Studio
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:SliderBS1.png]]
[[file:Range.png]]
[[file:SliderBS2.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.


<tabber>
JavaScript=
<syntaxhighlight lang="JavaScript">
// JavaScript
Range1.onchange = function() {
</syntaxhighlight>
|-|
BASIC=
<syntaxhighlight lang="vb.net">
' Basic
Function Range1_input_onchange()
</syntaxhighlight>
</tabber>


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
|-
| 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
| disable()||Disables the slider and prevents the user from changing the value
Line 57: Line 39:


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


{| 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 (BASIC) ==
</pre>
== Example (JavaScript) ==
</pre>


== 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

// JavaScript

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

' Basic

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

Output