Slider - Docs

A slider allows users to make selections from a range of values. This slider is fully data-driven and responsive, working across various layout setups without manual adjustment or remapping.

Viewmodels

SliderVM

controlArtboardartboard

Determines which artboard is used to visualize the component's state.

labelArtboardartboard

Determines which component is used for the Label.

valueDisplayArtboardartboard

Determines which component is used to display the current value of the slider.

defaultValuenumber

The initial value of the slider when rendered.

minValuenumber

The minimum value of the slider.

maxValuenumber

The maximum value of the slider.

valuenumber

The current value of the slider.

labelstring

Specifies the localized strings that identifies the slider.

sliderWidthnumber

The width of the layout containing the slider.

cursorPosnumber

The position of the cursor.

disabledboolean

Determines whether the slider is disabled.

hoverboolean

Indicates when the pointer overlaps with the Slider.

directionEnum

Determines the Slider's left-to-right alignment.

Hierarchical Structure

slider_component

Root - The Root of the component.
- TopRow - A Layout containing the label and value of the Slider on either end.
  - Label - A Layout containing the Label Artboard.
    - A component instance of labelArtboard.
  - Value - A Layout containing the Value Display Artboard. All pointer functionality targets this layout.
    - A component instance of valueDisplayArtboard.
- Control - A Layout containing the Control Artboard. All pointer functionality targets this layout.
  - A component instance of controlArtboard.
- Joystick - A joystick used to control the slider. The x position of its handle determines value.
CursorDebug - A constrained shape used to debug the cursor position. It drives cursorPos.

thumb_control

Root - The Root of the component.
- Thumb - A Group containing the shapes for the thumb. This group has a Follow Path constraint that targets Bar Path, with its distance property determined by value.
  - Circle - A shape visualizing the Slider's thumb.
- Bar - A layout that acts as the Slider's bar.
  - N-Slice Group - Used to extend Bar Path across the layout, ensuring the slider functions at any width.
    - Bar Path - A Path drawing a horizontal line.

Animations

This component contains three pairs of animations, each on their own layer.

Disabled
- DisabledTrue - Indicates the Slider cannot be interacted with. Plays if (disabled = true).
- DisabledFalse - Indicates the Slider can be interacted with. Plays if (disabled = false).
Hover
- HoverTrue - Indicates the pointer overlaps with the Slider. Plays if (hover = true) and (disabled = false).
- HoverFalse - Indicates the pointer does not overlap with the Slider. Plays if (hover = false).

text_label

Root - The Root of the component.
- Text Layout - A Layout containing a Text Element.
  - Text - A text element. The value of its Text Run is bound to label.

text_value_display

Root - The Root of the component.
- Text Layout - A Layout containing a Text Element.
  - Text - A text element. The value of its Text Run is bound to value.

Best Practices

This slider is built to prioritize responsiveness and compatibility with layouts. Should you decide to create a new control artboard for it, you'll need to make use of constraints, bones, and/or N-Slice Groups. Hard-coded transforms will not work with this setup.