Skip to content
search icon
clear
Component Status

Figma

How to add

  1. Locate the Assets tab in the Layers Panel.
  2. There are two ways to locate the Slider component needed:
    • Use the search bar to search for a component grouping name or variation name.
    • Scroll through the folders list and open the relevant grouping.
  3. Once the component is located, click and drag it into the frame/artboard.

How to use

  1. Place the Slider/Track as the bottom layer.
  2. Place the Slider/Indicator next.
  3. Place the Slider/Handle at the end (or each end) of the Indicator.
  4. Place Slider/Dots if needed.
  5. Select all the Slider layers and convert them to a frame/artboard by using the following shortcut:
  • Mac: Command + Option + G
  • PC: Ctrl + ALT + G
  1. Make sure to name the new group.
  2. Locate the Design tab in the Inspector Panel.
  3. Under the Constraints section, set up constraints.

API

PropertyTypeRequiredDefaultDescription
minNumberfalse0Min value
maxNumberfalse100Max value
valueUnion
Number │ Array<Number>
false[40, 60]Components value, string for slider, array for range
minMaxDotsBoolfalsetrueShow the min and max dots or not
stepNumberfalse1Stepping interval
onChangeFuncfalseundefinedFunction to be called when value change
onChangeCommittedFuncfalseundefined
outputFunctionFuncfalseundefinedFunction for formatting the output, e.g. with dates
minMaxValuesBoolfalsetrueShow the min and max values or not
disabledBoolfalsefalseDisabled
ariaLabelledbyStringtrue-Id for the elements that labels this slider
Edit this page on GitHub