range-input

RangeInput

A slider control to input a value within a fixed range.

Usage

import { RangeInput } from 'grommet';
<RangeInput />

Properties

id

The id attribute of the range input.

string

min

The minimum value permitted.

number
string

max

The maximum 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

Intrinsic element

input

Theme

global.focus.border.color

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

Defaults to

focus

global.spacing

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

Defaults to

24px

rangeInput.extend

Any additional style for the RangeInput. Expects string | (props) => any CSS styling; ``.

Defaults to

undefined

rangeInput.thumb.color

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

Defaults to

undefined

rangeInput.thumb.extend

Any additional style for the thumb. Expects string | (props) => {}.

Defaults to

undefined

rangeInput.track.color

The color of the track. Expects string.

Defaults to

{ dark: rgba(255, 255, 255, 0.33), light: rgba(0, 0, 0, 0.33) }

rangeInput.track.extend

Any additional style for the track. Expects string | (props) => any CSS styling; ``.

Defaults to

undefined

rangeInput.track.height

The height of the track. Expects string.

Defaults to

4px