Sliders

Sliders enable the selection of a single value, or a range of values, by manipulating handles along a linear scale.

Design System Guidelines

Standard Slider

Due to Webflow limitations, the slider doesn't function as expected:

• The slider handle doesn't move. If you want it to begin at a position other than the end, then you will need to manually position it.
• The tooltip is only supposed to appear above the handle while the handle is being pressed (not on hover).
• As the slider handle is repositioned, the value at the end and within the tooltip would update dynamically, but values within the label above (if any) would not.

Double Handle Slider

Due to Webflow limitations, the slider doesn't function as expected:

• The slider handles don't move. If you want them to begin at positions other than near the ends, then you will need to manually position them.
• The tooltips are only supposed to appear above the handles while the handles are being pressed (not on hover).
• As the slider handles are repositioned, the values at the ends and within the tooltips would update dynamically, but values within the label above (if any) would not.

Vertical Slider

Due to Webflow limitations, the slider doesn't function as expected:

• The slider handle doesn't move. If you want it to begin at a position other than the end, then you will need to manually position it.
• The tooltip is only supposed to appear adjacent to the handle while the handle is being pressed (not on hover).
• As the slider handle is repositioned, the value at the end and within the tooltip would update dynamically, but values within the label above (if any) would not.

Double Handle Vertical Slider

Due to Webflow limitations, this slider doesn't function as expected:

• The slider handles don't move. If you want them to begin at positions other than near the ends, then you will need to manually position them.
• The tooltips are only supposed to appear above the handles while the handles are being pressed (not on hover).
• As the slider handles are repositioned, the values at the ends and within the tooltips would update dynamically, but values within the label (if any) would not.