grommet
components

RangeInput

a slider control to input a value within a fixed range

Storybook
CodeSandbox

Props

a11yTitle

Custom label to be used by screen readers. When provided, an aria-label will be added to the element.

"a user friendly label for screen readers"

id

The id attribute of the range input.
"string"

max

The maximum value permitted.
number"string"

min

The minimum value permitted.
number"string"

name

The name attribute of the range input.
"string"

onChange

Function that will be called when the user changes the value. It will be passed an event object. The new input value will be available via 'event.target.value'.

"function"

step

The step interval between values.
number

value

The current value.
number"string"

Theme

global.focus.border.color

The border color of the component when in focus.
"focus"

global.focus.outline.color

The outline color around the component when in focus.
string | { dark: string, light: string }

global.focus.outline.size

The size of the outline around the component when in focus.
string

global.focus.shadow.color

The shadow color around the component when in focus.
"focus"

global.focus.shadow.size

The size of the shadow around the component when in focus.
"2px"

global.colors.border

The color used for rangeInput.track.color.
{
  "dark": "rgba(255,255,255,0.33)",
  "light": "rgba(0,0,0,0.33)"
}

global.spacing

The height, width and border-radius of the range thumb.
"24px"

rangeInput.extend

Any additional style for the RangeInput.
"any CSS"
(props) => {}

rangeInput.thumb.color

The color of the thumb.
string | { dark: undefined, light: undefined }

rangeInput.thumb.extend

Any additional style for the thumb.
"any CSS"
(props) => {}

rangeInput.track.color

The color of the track.
"border"

rangeInput.track.opacity

The opacity of the track color.
string | number

rangeInput.track.lower.color

The color of the lower bound track.
string | { dark: string, light: string }

rangeInput.track.lower.opacity

The opacity on the lower bound track color.
string | number

rangeInput.track.upper.color

The color of the upper track.
string | { dark: string, light: string }

rangeInput.track.upper.opacity

The opacity on the upper track color.
string | number

rangeInput.track.extend

Any additional style for the track.
"any CSS"
(props) => {}

rangeInput.track.height

The height of the track.
"4px"