Slider (Bootstrap)

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:

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. Many more options which can be set at runtime are listed there.

Properties

Standard properties are supported, plus these, which can be set at Design Time:

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.
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.
orientation	Horizontal or vertical.
step	Increment steps between min and max. Integer. Default is 50.

Options

The following options can be set at runtime:

id	string		set the id of the slider element when it's created
min	float	0	minimum possible value
max	float	10	maximum possible value
step	float	1	increment step
precision	float	number of digits after the decimal of step value	The number of digits shown after the decimal. Defaults to the number of digits after the decimal of step value.
orientation	string	'horizontal'	set the orientation. Accepts 'vertical' or 'horizontal'
value	float,array	5	initial value. Use array to have a range slider.
range	bool	false	make range slider. Optional if initial value is an array. If initial value is scalar, max will be used for second value.
selection	string	'before'	selection placement. Accepts: 'before', 'after' or 'none'. In case of a range slider, the selection will be placed between the handles
tooltip	string	'show'	whether to show the tooltip on drag, hide the tooltip, or always show the tooltip. Accepts: 'show', 'hide', or 'always'
tooltip_split	bool	false	if false show one tootip if true show two tooltips one for each handler
tooltip_position	string	null	Position of tooltip, relative to slider. Accepts 'top'/'bottom' for horizontal sliders and 'left'/'right' for vertically orientated sliders. Default positions are 'top' for horizontal and 'right' for vertical slider.
handle	string	'round'	handle shape. Accepts: 'round', 'square', 'triangle' or 'custom'
reversed	bool	false	whether or not the slider should be reversed
enabled	bool	true	whether or not the slider is initially enabled
formatter	function	returns the plain value	formatter callback. Return the value wanted to be displayed in the tooltip
natural_arrow_keys	bool	false	The natural order is used for the arrow keys. Arrow up select the upper slider value for vertical sliders, arrow right the righter slider value for a horizontal slider - no matter if the slider was reversed or not. By default the arrow keys are oriented by arrow up/right to the higher slider value, arrow down/left to the lower slider value.
ticks	array	[ ]	Used to define the values of ticks. Tick marks are indicators to denote special values in the range. This option overwrites min and max options.
ticks_positions	array	[ ]	Defines the positions of the tick values in percentages. The first value should always be 0, the last value should always be 100 percent.
ticks_labels	array	[ ]	Defines the labels below the tick marks. Accepts HTML input.
ticks_snap_bounds	float	0	Used to define the snap bounds of a tick. Snaps to the tick if value is within these bounds.
ticks_tooltip	bool	false	Used to allow for a user to hover over a given tick to see it's value. Useful if custom formatter passed in
scale	string	'linear'	Set to 'logarithmic' to use a logarithmic scale.
focus	bool	false	Focus the appropriate slider handle after a value change.
labelledby	string,array	null	ARIA labels for the slider handle's, Use array for multiple values in a range slider.
rangeHighlights	array	[]	Defines a range array that you want to highlight, for example: [{'start':val1, 'end': val2}].

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”