Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

range-input

v2.6.5arrow_drop_down
v2.6.5
v2.5.5
STATUS
Passing
DOWNLOADS
308
LICENSE
Apache 2.0
VISIBILITY
Public
PUBLISHED
8 months ago
SIZE
31 KB
A slider control to input a value within a fixed range.
1 contributor
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
React
React
Vue
Angular
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';
toggle layout
modifieddraft
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