Range

A range lets users choose an approximate value on a slider.

Examples Code Usage Changelog

Installation

Package installation information
Install	`yarn add @atlaskit/range`
Source	Bitbucket.org, (opens new window)
npm	@atlaskit/range, (opens new window)
Bundle	unpkg.com, (opens new window)

Props

`defaultValue`
Description	Sets the default value if range is not set.
Type	`number`

`isDisabled`
Description	Sets whether the field range is disabled.
Type	`boolean`

`max`
Description	Sets the maximum value of the range.
Type	`number`

`min`
Description	Sets the minimum value of the range.
Type	`number`

`onChange`
Description	Hook to be invoked on change of the range.
Type	`(value: number) => void`

`ref`
Description	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
Type	`string \| Ref<HTMLInputElement>`

`step`
Description	Sets the step value for the range.
Type	`number`

`testId`
Description	A `testId` prop is provided for specific elements. This is a unique string that appears as a data attribute `data-testid` in the rendered code and serves as a hook for automated tests.
Type	`string`

`value`
Description	Sets the value of the range.
Type	`number`

Was this page helpful?

We use this feedback to improve our documentation.