Updated 18 December 2024
Range slider 
Updated 18 Dec 2024View FigmaUpdated 18 Dec 2024View Figma
A range slider is an input field that merchants can use to select a numeric value within a given range (minimum and maximum values).
Properties
Type
Change between single and dual thumb range sliders using the `Type` property.
Prefix
Toggle the `Prefix` property to display an icon or text to the left of the slider.
Suffix
Toggle the `Suffix` property to display an icon or text to the right of the slider.
Error
Use the `State` property to display the range slider in a validation error state.
State
Tips
Adjusting the selected range
The range slider was built to allow for adjusting the selected range.
To adjust the selected range:
- Use the layers panels to select the `Slider (responsive)` layer within the range slider component.
- Adjust the auto layout left and right padding to change the selected portion of the slider.
Range slider(10 variants)
Thumb(4 variants)