Range Slider

The slider provides people with the opportunity to quickly choose a numerical value from a predefined range. The tool offers you the opportunity to customize the range to your own needs.

Preview of the Range Slider being used to indicate an annual budget.
A video walkthrough of the Range Slider block.
Edit Options
Option name
Description
Range min
Set the lowest end of the range.
Range max
Cap the highest end of the range.
Default value
Dictates the value the slider will be set at on page load.
Step size
Determines the incriminates but which the slider can be adjusted.
Hide input
When toggled in the appearance menu, the input does not appear in the slider's label.
Hide bottom labels
Hides the minimum and maximum labels.
Prefix
Add a prefix to your values such as a dollar sign ($).
Suffix
add a suffix to your values such as a euro symbol (€).
​

Building blocks - Previous

Icon Rating

Next - Building blocks

Upload

Last updated 6 months ago

Option name	Description
Range min	Set the lowest end of the range.
Range max	Cap the highest end of the range.
Default value	Dictates the value the slider will be set at on page load.
Step size	Determines the incriminates but which the slider can be adjusted.
Hide input	When toggled in the appearance menu, the input does not appear in the slider's label.
Hide bottom labels	Hides the minimum and maximum labels.
Prefix	Add a prefix to your values such as a dollar sign ($).
Suffix	add a suffix to your values such as a euro symbol (€).