We’re excited to announce Bit’s new home at bit.dev!Learn more

range-input

v2.6.5arrow_drop_down
v2.6.5
v2.5.5
STATUS
Passing
DOWNLOADS
275
LICENSE
Apache 2.0
VISIBILITY
Public
PUBLISHED
3 weeks ago
subject
A slider control to input a value within a fixed range.
1 contributor
Like
Use range-input in your project ?
Copied
npm i @bit/grommet.grommet.range-input
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
modified
chevron_left
chevron_right

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) => {}.

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) => {}.

Defaults to

undefined

rangeInput.track.height

The height of the track. Expects string.

Defaults to

4px