The Slider Control is used to display and/or change a numeric value visually, instead of having to manually enter it.

Like almost all SPARK controls, you can trigger events that are fired when the user interacts with the control (see the Event and Methods sections below and the Event Handling article for more information).


Value Formula Formula/expression to use when calculating slider values automatically


Minimum Minimum value in slider range

Maximum Maximum value in slider range

Step Slider value step size

Tab Index Form control tabbing sequence index, tab indices start at 1, and may be set sparsely



Vertical When selected, slider will be vertical, instead of horizontal

Color Style


Height Slider height in px or em

Width Slider width in px, %, or em, e.g. 50px, 20%, 0.4em, if no unit is specified, px is assumed

Border Radius Radius of curvature for corners of slider bar

Handle Width Width in px or em, e.g. 50px, 0.4em, if no unit is specified px is assumed (% should be avoided)

Handle Radius Radius of curvature for corners of the handle


These are the configuration option settings...

Note: The control Id for the Output Text is Output_Text1

This is the result after sliding the handle...

Each time the handle is moved, it will increment by 10 (based on the Step configuration option above), and will have a maximum value of 50 (based on the Maximum configuration option above)...


With the Slider control, there are 2 types of event handlers:

  • On Load When the page loads
  • On Change When there is a change

You can use JavaScript logic to affect the effects of the control, depending on the event. More information on using these controls can be found in the Event Handling article.


For detailed information on the available methods for this control, access the JS Doc file.


  • Authors: Courtney Silva
  • Date Created: March 18, 2016
  • Date Modified: March 18, 2016
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request