RangeInput

a slider control to input a value within a fixed range

Storybook

CodeSandbox

Github

Using Grommet for HPE?See RangeInput examples and guidance.

Props

a11yTitle

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

string

"a user friendly label for screen readers"

color

The color of the track.

string

A hex, name, rgb value, or theme color name.

"control"

object

An object with a color for dark and light modes.

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

array

An array of objects with a color, value and opacity based on thumb value.

[
  { value: 3, color: '#FF0000', opacity: 0.5 },
  { value: 7, color: { light: 'accent-3', dark: 'brand' } },
  { value: 10, color: '#00FF00' },
]

disabled

Same as React <input disabled={} />. Also adds a hidden input element with the same name so form submissions work.

boolean

true

false

id

The id attribute of the range input.

string

"inputId"

max

The maximum value permitted.

number

string

"10"

min

The minimum value permitted.

number

string

"1"

name

The name attribute of the range input.

string

"name"

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

(event) => {}

step

The step interval between values.

number

"2"

value

The current value.

number

string

"1"

React/DOM Properties

At its core, the RangeInput component is a regular <input> 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 input 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.focus.border.color

The border color of the component when in focus.

string

A hex, name, or rgb value.

"focus"

object

An object with a color for dark and light modes.

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

global.focus.outline.color

The outline color around the component when in focus.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

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

global.focus.outline.size

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

string

"2px"

global.focus.shadow.color

The shadow color around the component when in focus.

string

"focus"

object

An object with a color for dark and light modes.

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

global.focus.shadow.size

The size of the shadow around the component when in focus.

string

"2px"

global.colors.border

The color used for rangeInput.track.color.

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.spacing

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

string

"24px"

rangeInput.disabled.opacity

The opacity when the RangeInput is disabled.

number

0.3

rangeInput.disabled.thumb.color

The color of the thumb on RangeInput when disabled.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

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

rangeInput.disabled.track.color

The color of the track on RangeInput when disabled.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

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

rangeInput.extend

Any additional style for the RangeInput.

string

Any CSS.

css`color: 'blue'`

function

(props) => {}

rangeInput.pad

The pad around the RangeInput.

string

T-shirt sizing based off the theme or a specific size in px, em, etc.

"none"

"xxsmall"

"xsmall"

"small"

"medium"

"large"

"xlarge"

"any CSS size"

object

An object can be specified to distinguish horizontal padding, vertical padding, and padding on a particular side.


{
  vertical: "...",
  horizontal: "...",
  top: "...",
  bottom: "...",
  left: "...",
  right: "...",
  start: "...",
  end: "..."
}

rangeInput.thumb.color

The color of the thumb.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

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

rangeInput.thumb.extend

Any additional style for the thumb.

string

Any CSS.

css`color: 'blue'`

function

(props) => {}

rangeInput.track.color

The color of the track.

string

A hex, name, or rgb value.

"border"

object

An object with a color for dark and light modes.

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

rangeInput.track.opacity

The opacity of the track color.

string

"medium"

number

0.5

rangeInput.track.lower.color

The color of the lower bound track.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

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

rangeInput.track.lower.opacity

The opacity on the lower bound track color.

string

"medium"

number

0.5

rangeInput.track.upper.color

The color of the upper track.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

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

rangeInput.track.upper.opacity

The opacity on the upper track color.

string

"medium"

number

0.5

rangeInput.track.extend

Any additional style for the track.

string

Any CSS.

css`color: 'blue'`

function

(props) => {}

rangeInput.track.height

The height of the track.

string

"4px"