Ranges

Adding and styling ranges.

What is a Range?

A range, sometimes known as a range slider, is used to select a value by sliding a handle. There is often a minimum and a maximum, and the increments can be specified.

Location in the Parts Library: Base Parts > Data Input > Range

Example of a Range Slider

How Are Ranges Useful In Forms?

Ranges are useful for several reasons. They are:

1. Precise: Range sliders allow users to specify a value within a range with precision. Instead of typing in a number, users can visually and intuitively select a point along the range, which can help reduce errors in input.

2. Easy to Use: They provide a user-friendly interface for selecting values within a range. Users can slide the handle along the track to indicate their desired value, which can be more intuitive and engaging compared to typing in a value manually.

3. Space Efficient: Range sliders can be useful when space is limited in the form interface. Instead of displaying multiple input fields for specifying a range, a single range slider can compactly represent the entire range, saving space on the form.

4. A Visual Representation: They offer a visual representation of the range, making it easier for users to understand the range of values available and providing immediate feedback on the selected value.

Setting the Range ID and State

Your Range will need to be given a unique ID, which is an identifier. For example, if your Range part is to measure the extent to which a user recommends the service, then you might give it an identifier such as Recommends, or something that indicates to you what the Range is about.

Then, apply a State. Do this by selecting State Model in the right property editor, and giving the state a name. It could be the same as the ID, or similar. A default is not required but is good to have, and it will represent the default value the range shows on the screen before a user applies a value. The property editors for these are shown below:

Range Property Editors - Where to Set the ID and State Model

Setting a Minimum, a Maximum, and a Step

The range part needs to have a minimum and maximum number set. The minimum value attribute specifies the lowest value that can be selected. The maximum value attribute specifies the highest value that can be selected.

The step specifies the intervals at which values can be selected within the defined range.

Range Editor - Setting Minimum, Maximum, and Step

Any text underneath the Range can be changed using the Text Editor and styled using the Font Editor. You can change the font family, size, weight, line height, and style.

Press play to watch the short video below.

Editing the Text Values Underneath the Range

Styling a Range

Like many other parts, opacity, rounding, and spacing can be applied using the property editor on the right, once the Range has been selected.

Ranges come with preset sizes, as well as the ability to set the exact size. All sizes can be made responsive.

It's important to note that if your range has text, numbers, or icons underneath it to represent the scale, the size of the row containing these parts will need to be adjusted to match the size of the range.

In the example below, the range had a width of 'full', and was updated to be a width of 500. Similarly, the row had a full width and was updated to be a width of 500 so that the scale corresponded to the range.

Changing the Width of a Range, and the Scale Underneath

Changing the Color of Ranges

Ranges allow you to set the foreground and background colors. It is recommended to only set the foreground color, as the background color covers the bar, making it less visible. Here is an example of changing the foreground and background color. In the example the background color has been applied to show you, then removed again:

Applying Foreground and Background Color to a Range Part

You can also change the colors of Ranges in an active state, when focused, and on hover. These are done the same way for foreground and background color (again recommending that only foreground is selected).

To change the color when the Range is being hovered, select the Range and open the 'Colors on Hover' editor on the right. Now you can set your preferred foreground color combination to signify that the Range is being hovered.

The 'Color on Focus' editor on the right refers to the color of the Range after it has been clicked, or if the user tabs to the Range.

The 'Color on Active' editor on the right refers to the color of the Range when it is active (the moment it is clicked).

Related Information

Rows

Text

Icons

Customizing and formatting