grommet
components

RangeSelector

a control to input a range of values

0
1
2
3
4
5
6
7
8
9
Storybook
CodeSandbox

Props

color

What color to use to indicate the selection.
"string"
{
dark:
"string,"
light: string
}

direction

"horizontal""vertical"

invert

Whether to indicate what has not been selected.
truefalse

max

The maximum value permitted.
100

messages

Custom messages used by screen readers for accessibility.
{
lower:
"string,"
upper: string
}

min

The minimum value permitted.
0

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.
"weak""medium""strong""string"truefalse

round

How much to round the corners.
"xsmall""small""medium""large""full""string"

size

How thick to make the selection indicator.
"xxsmall""xsmall""small""medium""large""xlarge""full""string"

step

The step interval between values.
1

values

The current values.
[
number
]

Theme

global.borderSize

The size of the border.
{
  "xsmall": "1px",
  "small": "2px",
  "medium": "4px",
  "large": "12px",
  "xlarge": "24px"
}

global.colors.border

The color for the border.
{
  "dark": "rgba(255,255,255,0.33)",
  "light": "rgba(0,0,0,0.33)"
}

global.colors.control

The color for the edge controls.
{"dark": "accent-1", "light": "brand"}

global.colors.focus

The color of the focus.
"#6FFFB0"

global.edgeSize.small

The possible sizes for the margin, padding and gap.
"12px"

rangeSelector.background.invert.color

The background color on an invert display.
"light-4"

rangeSelector.edge.type

The edge control type.
'bar' | 'disc' | node

global.spacing

The size of the edge controls thumb.
"24px"