Almost EVERYONE who tried headless systems said they saw benefits. Download the state of CMS now!

Storyblok now on AWS Marketplace: Read more

O’Reilly Report: Decoupled Applications and Composable Web Architectures - Download Now

Empower your teams & get a 582% ROI: See Storyblok's CMS in action

Skip to main content
Browse apps

Requires Community plan

Storyblok GmbH
Last update
Select a numeric value within a range.

Select a value within a range using the Slider field plugin. Sliders are ideal for setting properties such as opacity, brightness, percentages, and ratios.

How to set up

In the Block Library, select a block to edit. Add a new field, set the Field Type to Plugin, and set the Custom Type to storyblok-slider.

Configure the options:

  • minValue: (optional) The minimum value of the slider's range. Defaults to 0.
  • maxValue: (optional) The maximum value of the slider's range. Defaults to 100.
  • defaultValue: (optional) The starting position of the slider. This number must be within the range. Defaults to minValue.
  • marks: (optional) A JSON array of numbers. The numbers must be within the range. For each value in this array, a mark will be shown, together with a label for the value. For example, for the range [-10, 10], you can use the the marks [-5, 0, 5].
  • stepSize: (optional) The minimum distance between points on the scale. To disable it, set the stepSize to 0. Defaults to 1.

The options for label formatting affects how the field is rendered, but does not change the output. These options are passed as properties to Intl.NumberFormat. If any of the formatting options are invalid, the formatting will be disabled.

  • minimumSignificantDigits: (optional) The minimum number of significant digits to use. Possible values are from 1 to 21; the default is 1.
  • maximumSignificantDigits: (optional) The maximum number of significant digits to use. Possible values are from 1 to 21; the default is 21.
  • style: (optional) The formatting style to use. If the style is unit, the unit property must be provided. The default is decimal. The following values are allowed:
    • decimal
    • percent
    • unit
  • unit: (optional) core unit identifiers to use in unit formatting. Pairs of units can be concatenated with -per- to make a compound unit; for example, kilobit-per-second. The following values are allowed:
    • 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
    • year


Rotation with a default value, 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 unit and custom significant digits:

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