Slider (Bootstrap): Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
Line 10: Line 10:
This control uses non-standard event names. AppStudio will generate an event line like
This control uses non-standard event names. AppStudio will generate an event line like
<pre>
<pre>
Function Slider1_onchange()
Function Slider1_onchange() ' BASIC
Slider1_onchange = function() { //JavaScript
</pre>
</pre>
The code needs to be modified as follows to work:
The code needs to be modified as follows to work:
<pre>
<pre>
Function Slider1_input_onchange()
Function Slider1_input_onchange() 'BASIC
Slider1_input_onchange = function() { //JavaScript
</pre>
</pre>



Revision as of 18:33, 11 November 2016

Description

The Slider control allows the input of a range of values between min and max. It can be horizontal or vertical. 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 non-standard event names. AppStudio will generate an event line like

Function Slider1_onchange()  ' BASIC
Slider1_onchange = function() { //JavaScript

The code needs to be modified as follows to work:

Function Slider1_input_onchange()  'BASIC
Slider1_input_onchange = function() { //JavaScript

This control uses the Bootstrap-slider. Complete documentation is here: https://github.com/seiyria/bootstrap-slider

Properties

Standard properties are supported, plus:

colorOfHandle() Color of slider handle. Can be name, #RRGGBB, rgb(R,G,B) or transparent.
colorOfSelection() Color of selected area. Can be name, #RRGGBB, rgb(R,G,B) or transparent.
colorOfTrackHigh() Color of unselected area. Can be name, #RRGGBB, rgb(R,G,B) or transparent.
getValue() The value of the control. Default is 50.
min The minimum value. Integer. Default is 0.
max The maximum value. Integer. Default is 100.
orientation Horizontal or vertical. (
setValue Set the value of the slider.
step Increment steps between min and max. Integer. Default is 50.

Events

Standard events are supported.

Example

Function Slider1_onchange()
  Text1.value="Slider 1 changed to " & Slider1.value
End Function
 
Function Slider2_onchange()
  Text1.value="Slider 2 changed to " & Slider2.value
End Function

'Change the color of the background at runtime
$(Slider1).css("background-color","red")

'Change the color of the track
$(Slider1).find(".ui-slider-track").css("background-color","red")

'Change the color of the slider
$(Slider1).find(".ui-slider-handle").css("background-color","blue")

Output

“Slider 2 changed to 2”