A left-pointing arrowBack Home
UI Token

Range Slider

A range slider is an interactive control that allows the user to slide a handle along a predetermined scale to set a numeric input.

Visual Example

Download for FigmaUI Token

Types

Types are variations or derivatives of an individual element. They can help you choose what to include in your design.
Single
Double

Interaction States

Interaction states communicate the status of an element on the user interface. Consider all of the following states when designing this element:
A green checkmark iconDefault
A green checkmark iconDisabled
A green checkmark iconHover
A green checkmark iconFocus
A green checkmark iconEmpty

Chart Features

For this particular visualization, you may consider these additional features.
No items found.

Get it for Figma!

Everything on this website has been designed in Figma, and is ready to use.
A preview of the Figma Design Encyclopedia design systemThe logo for the Figma design app
Buy for Figma
Preview the file before you buy!

View more:

Checkboxes

Checkboxes let users make a binary choice between two distinct options.
UI Token

Text Fields

Text fields receive, store, and present alphanumeric content.
UI Token

Avatar

An avatar is a visual representation of a user.
UI Token

Image

Images can be large or small, and cropped in different ways to fit the space.
UI Token
The Design Encyclopedia is a passion project by Jon Moore to learn how to use Figma, and was designed and built in Webflow (this is an affiliate link). If you would like to reference the encyclopedia in a separate project, partner on a collaboration, or have a general inquiry, send me an email.

© 2021 Design Encyclopedia. All rights reserved.
A square collage of design components from the design encyclopedia.