grommet
components

RangeInput

a slider control to input a value within a fixed range

Storybook
CodeSandbox

Props

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 color around the component when in focus.
"focus"

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.
";"

rangeInput.track.extend

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

rangeInput.track.height

The height of the track.
"4px"