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 specific 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, all optional:

Option	Default	Description
minValue	0	Lower end of the range.
maxValue	100	Upper end of the range.
defaultValue	minValue	Value the slider starts at. Must be within the range.
marks		JSON array of numbers within the range. The slider shows a mark and a label for each number. For example, [-5, 0, 5] for the range [-10, 10].
stepSize	1	Minimum distance between points on the scale. Set to 0 to turn off discrete steps.

Label formatting

The following options change how the field displays the value, not the value the field stores. The field passes them to the Intl.NumberFormat() constructor. If any formatting option is invalid, the field turns formatting off.

Option	Default	Description
minimumSignificantDigits	1	Fewest significant digits in the displayed value, from 1 to 21.
maximumSignificantDigits	21	Most significant digits in the displayed value, from 1 to 21.
style	decimal	Formatting style: decimal, percent, or unit. The unit style requires the unit option.
unit		Core unit identifier used with the unit style.

The unit option accepts acre, bit, byte, celsius, centimeter, day, degree, fahrenheit, fluid-ounce, foot, gallon, gigabit, gigabyte, gram, hectare, hour, inch, kilobit, kilobyte, kilogram, kilometer, liter, megabit, megabyte, meter, mile, mile-scandinavian, milliliter, millimeter, millisecond, minute, month, ounce, percent, petabyte, pound, second, stone, terabit, terabyte, week, yard, and year. To create a compound unit, join two units with -per-, for example kilobit-per-second.

Examples

Rotation with discrete steps, marks, and custom formatting:

minValue: -180
maxValue: 180
stepSize: 5
marks: [-90, 0, 90]
style: unit
unit: degree

Format a value between 0 and 1 as a percentage:

minValue: 0
maxValue: 1
stepSize: 0.01
style: percent

Format with a unit and custom significant digits:

minValue: 0
maxValue: 1000
stepSize: 0
minimumSignificantDigits: 2
maximumSignificantDigits: 2
style: unit
unit: gigabit-per-second

Further resources

Slider in the app directory