RangeSelector

a control to input a range of values

Props

color

What color to use to indicate the selection.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

direction

The orientation to layout the values in.

string

"horizontal"

"vertical"

invert

Whether to indicate what has not been selected.

boolean

true

false

max

The maximum value permitted.

number

messages

Custom messages used by screen readers for accessibility.

string


{
  lower: "string",
  upper: "string"
}

min

The minimum value permitted.

number

onChange

Function that will be called when the user changes one of the values. It will be passed an array of two numbers indicating the new values selected.

function

() => {}

opacity

Transparency of the selection indicator.

boolean

true

false

string

"weak"

"medium"

"strong"

"string"

round

How much to round the corners.

string

"xsmall"

"small"

"medium"

"large"

"full"

"string"

size

How thick to make the selection indicator.

string

"xxsmall"

"xsmall"

"small"

"medium"

"large"

"xlarge"

"full"

"string"

step

The step interval between values.

number

values

The current values.

array[number]

[1, 2]

React/DOM Properties

At its core, the RangeSelector component is a regular <div> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for div elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.

Theme

global.borderSize

The size of the border.

string

{
  xsmall: '1px',
  small: '2px',
  medium: '4px',
  large: '12px',
  xlarge: '24px,
}

global.colors.border

The color for the border.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

{ dark: "rgba(255, 255, 255, 0.33)", light: "rgba(0, 0, 0, 0.33)" }

global.colors.control

The color for the edge controls.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

{dark: "accent-1", light: "brand" }

global.colors.focus

The color of the focus.

string

"accent-1"

global.edgeSize.small

The possible sizes for the margin, padding and gap.

string

"6px"

rangeSelector.background.invert.color

The background color on an invert display.

string

"light-4"

rangeSelector.edge.type

The edge control type.

string

"bar"

"disc"

global.spacing

The size of the edge controls thumb.

string

"24px"