Slider

The Slider app adds a field type for selecting a number within a range. Use it for values such as opacity, brightness, percentages, and ratios. The field formats the displayed value through the Intl.NumberFormat API, which supports decimal, percentage, and unit styles across more than 40 units.

Features

• Define the minimum and maximum of the range.
• Set the value the slider starts at.
• Label positions along the track with marks.
• Restrict selection to discrete steps.
• Format the displayed value as a decimal, a percentage, or a unit.

Setup

In the Block Library, select the block you want to edit, add a field, set its field type to Plugin, and set the custom type to storyblok-slider.

The field takes the following options:

Option	Description
minValue	Lower end of the range.
maxValue	Upper end of the range.
defaultValue	Value the slider starts at.
marks	Labeled positions along the track.
stepSize	Increment between selectable values.
style	Formatting style: decimal, percentage, or unit.
unit	Unit used when style is set to unit.
minimumSignificantDigits	Fewest significant digits in the displayed value.
maximumSignificantDigits	Most significant digits in the displayed value.

Further resources

Slider in the app directory