What color to use to indicate the selection.
stringA hex, name, or rgb value.
"brand"
objectAn object with a color for dark and light modes.
{ dark: "string", light: "string" }Whether to show text labels indicating the selected values.
booleantrue
false
functionA function that returns either a string or a React node.
(number) => {}Custom messages used by screen readers for accessibility.
string
{
lower: "string",
upper: "string"
}
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() => {}How thick to make the selection indicator.
string"xxsmall"
"xsmall"
"small"
"medium"
"large"
"xlarge"
"full"
"string"
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.
The size of the border.
string{
xsmall: '1px',
small: '2px',
medium: '4px',
large: '12px',
xlarge: '24px,
}The color for the border.
stringA hex, name, or rgb value.
"brand"
objectAn object with a color for dark and light modes.
{ dark: "rgba(255, 255, 255, 0.33)", light: "rgba(0, 0, 0, 0.33)" }The color for the edge controls.
stringA hex, name, or rgb value.
"brand"
objectAn object with a color for dark and light modes.
{dark: "graph-0", light: "brand" }