Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@atlaskit/range

atlassian51.8kApache-2.09.2.11TypeScript support: included

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

atlaskit, react, ui

readme

Range

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

Installation

yarn add @atlaskit/range

Usage

For more information, see our detailed range docs and examples.

changelog

@atlaskit/range

9.2.11

Patch Changes

  • Updated dependencies

9.2.10

Patch Changes

  • 39e543109ec09 - add type info to forwardRef components
  • Updated dependencies

9.2.9

Patch Changes

  • f3494b0a49dbc - Internal changes to use new shape tokens. No visual changes.

9.2.8

Patch Changes

9.2.7

Patch Changes

  • f0662cd7a143e - Internal changes to how borders are applied.
  • Updated dependencies

9.2.6

Patch Changes

  • Updated dependencies

9.2.5

Patch Changes

  • Updated dependencies

9.2.4

Patch Changes

  • 255837cfba315 - Internal changes to how border radius is applied.
  • Updated dependencies

9.2.3

Patch Changes

  • Updated dependencies

9.2.2

Patch Changes

9.2.1

Patch Changes

  • Updated dependencies

9.2.0

Minor Changes

  • #192312 8deb240800b82 - This cleans up the feature flag references for color contrast improvements, making them fully available to all people.

9.1.5

Patch Changes

  • Updated dependencies

9.1.4

Patch Changes

  • Updated dependencies

9.1.3

Patch Changes

  • Updated dependencies

9.1.2

Patch Changes

9.1.1

Patch Changes

  • Updated dependencies

9.1.0

Minor Changes

  • #164510 de265f5382075 - [ux] Improves visibility for people with low vision by adding an indicator to better recognize the range max. Also provides a darker background color and increases the track size from 4px to 6px.

9.0.4

Patch Changes

  • Updated dependencies

9.0.3

Patch Changes

  • #129972 b2d69a39e6687 - Update @compiled/react dependency for improved type checking support.
  • Updated dependencies

9.0.2

Patch Changes

  • Updated dependencies

9.0.1

Patch Changes

9.0.0

Major Changes

Patch Changes

  • Updated dependencies

8.2.0

Minor Changes

Patch Changes

  • Updated dependencies

8.1.2

Patch Changes

  • Updated dependencies

8.1.1

Patch Changes

  • Updated dependencies

8.1.0

Minor Changes

Patch Changes

  • Updated dependencies

8.0.2

Patch Changes

  • Updated dependencies

8.0.1

Patch Changes

  • #100413 e4d6f320b1650 - Fix styling of our @atlaskit/range component lost in v8.0.0 rendering the component invisible.

8.0.0

Major Changes

  • #172418 8a5e8d3d28432 - Migrated from @emotion/react to @compiled/react in order to improve performance, align with the rest of the Atlaskit techstack, and support React 18 Streaming SSR. Please note, in order to use this version of @atlaskit/range, you will need to ensure that your bundler is configured to handle .css imports correctly. Most bundlers come with built-in support for .css imports, so you may not need to do anything. If you are using a different bundler, please refer to the documentation for that bundler to understand how to handle .css imports. For more information on the migration, please refer to RFC-73 Migrating our components to Compiled CSS-in-JS.

7.4.5

Patch Changes

  • #165531 57f451bda8919 - Adds side-effect config to support Compiled css extraction in third-party apps

7.4.4

Patch Changes

  • Updated dependencies

7.4.3

Patch Changes

  • Updated dependencies

7.4.2

Patch Changes

  • Updated dependencies

7.4.1

Patch Changes

  • Updated dependencies

7.4.0

Minor Changes

  • #127511 db30e29344013 - Widening range of react and react-dom peer dependencies from ^16.8.0 || ^17.0.0 || ~18.2.0 to the wider range of ^16.8.0 || ^17.0.0 || ^18.0.0` (where applicable).

    This change has been done to enable usage of `react@18.3as well as to have a consistent peer dependency range forreactandreact-domfor/platform` packages.

Patch Changes

  • Updated dependencies

7.3.1

Patch Changes

7.3.0

Minor Changes

  • #110836 a8bd419fd70b9 - Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime is implicitly set to automatic.

7.2.0

Minor Changes

7.1.8

Patch Changes

7.1.7

Patch Changes

7.1.6

Patch Changes

7.1.5

Patch Changes

  • #36754 4ae083a7e66 - Use @af/accessibility-testing for default jest-axe config and jest-axe import in accessibility testing.

7.1.4

Patch Changes

  • #35441 599bfe90ee3 - Internal change to use shape tokens. There is no expected visual change.

7.1.3

Patch Changes

  • #32935 b1bdec7cce2 - Internal change to enforce token usage for spacing properties. There is no expected visual or behaviour change.

7.1.2

Patch Changes

7.1.1

Patch Changes

7.1.0

Minor Changes

Patch Changes

  • Updated dependencies

7.0.4

Patch Changes

  • #27634 22b754d311f - Updates usage of removed design token utilities.UNSAFE_util.transparent in favour of its replacement utilities.UNSAFE.transparent
  • Updated dependencies

7.0.3

Patch Changes

  • Updated dependencies

7.0.2

Patch Changes

  • Updated dependencies

7.0.1

Patch Changes

  • Updated dependencies

7.0.0

Major Changes

  • #25860 78741dd1644 - [ux] Breaking visual changes to range to afford better contrast:

    • The scrubber now applies the same color as the foreground
    • The disabled state has been altered; it's now a consistently applied opacity state overlay across the whole element
    • The input now uses :focus-visible, rather than :focus and applies an offset focus ring

6.1.1

Patch Changes

  • #26303 9827dcb82b8 - No-op change to introduce spacing tokens to design system components.

6.1.0

Minor Changes

  • #24710 1966ffa850d - Updates @emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.

6.0.9

Patch Changes

6.0.8

Patch Changes

6.0.7

Patch Changes

  • #23381 8202e37941b - Internal code change turning on new linting rules.
  • Updated dependencies

6.0.6

Patch Changes

  • #22642 45ebe7af434 - Moved to using declarative entrypoints internally. Public API is unchanged.

6.0.5

Patch Changes

  • Updated dependencies

6.0.4

Patch Changes

6.0.3

Patch Changes

  • Updated dependencies

6.0.2

Patch Changes

  • Updated dependencies

6.0.1

Patch Changes

  • Updated dependencies

6.0.0

Major Changes

  • #18526 17d9edaa415 - In preparation for compiled adoption, internal styling has been rewritten to remove dynamic styles. This includes custom theming using the theme prop, which has been removed.

    If you are not using the theme prop, there should be no breaking changes.

5.1.4

Patch Changes

  • #16752 19d72473dfb - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
  • 19d72473dfb - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
  • Updated dependencies

5.1.3

Patch Changes

  • Updated dependencies

5.1.2

Patch Changes

5.1.1

Patch Changes

  • #15998 f460cc7c411 - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
  • Updated dependencies

5.1.0

Minor Changes

  • #14777 21c178539a2 - [ux] Instrumented range with the new theming package, @atlaskit/tokens.

    New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha). These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.

Patch Changes

  • Updated dependencies

5.0.11

Patch Changes

  • Updated dependencies

5.0.10

Patch Changes

5.0.9

Patch Changes

  • #11980 b0183dd2972 - Updated package.json decriptions and documentation. Docs have moved from atlaskit.atlassian.com to atlassian.design

5.0.8

Patch Changes

5.0.7

Patch Changes

  • #7762 952019cfd39 - Removed extraneous/unnecessary dependencies for design system components.

5.0.6

Patch Changes

  • #6930 3137d05e06 - [ux] Fixed rendering bug inside of Range. Now the blue trackbar snaps to a step in the range to align with the position of the thumb.

5.0.5

Patch Changes

5.0.4

Patch Changes

  • #5497 5f58283e1f - Export types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules compiler option. This requires version 3.8 of Typescript, read more about how we handle Typescript versions here: https://atlaskit.atlassian.com/get-started Also add typescript to devDependencies to denote version that the package was built with.

5.0.3

Patch Changes

  • Updated dependencies

5.0.2

Patch Changes

  • #3885 6c525a8229 - Upgraded to TypeScript 3.9.6 and tslib to 2.0.0

    Since tslib is a dependency for all our packages we recommend that products also follow this tslib upgrade to prevent duplicates of tslib being bundled.

5.0.1

Patch Changes

  • #3823 6262f382de - Use the 'lodash' package instead of single-function 'lodash.*' packages
  • e99262c6f0 - All form elements now have a default font explicitly set

5.0.0

Major Changes

Patch Changes

  • Updated dependencies

4.0.1

Patch Changes

  • #2866 54a9514fcf - Build and supporting files will no longer be published to npm

4.0.0

Major Changes

  • #2137 da1c8c16d4 - In this version we made range dramatically faster and lighter 🤩

    Changes

    In 4.0.0 we bring significant performance improvements all for just the cost of 1 breaking change 😮. That's not all folks because this update comes with a 🤑 FREE 🤑 codemod for you to upgrade with.

    • Range no longer has a peerDependency on styled-components@3. Internally range is now using @emotion/core for styling
    • A performance issue made the range noticeably laggy with large ranges. With this change we are no longer creating new classes on each step change and instead updating a css variable, making Range noticeably smoother.
    • Changed the inputRef prop to be ref which returns the ref of the range input using React.forwardRef. This new ref prop will accept the type of the old inputRef prop, (input?: HTMLInputElement) => any, as well as if ref is created with React.createRef.
    • A new example that shows off how to rate limit your onChange event

    Automatic upgrading

    # You first need to have the latest range installed before you can run the codemod
yarn upgrade @atlaskit/range@^4.0.0

# Run the codemod cli
# Pass in a parser for your codebase
npx @atlaskit/codemod-cli /path/to/target/directory --parser [tsx | flow | babel]

    Notes

    • You first need to upgrade to 4.0.0 before you run the codemod cli. This is because the cli will look in your local node_modules for the codemod which is published inside the spinner package.
    • The codemod is pretty clever, and will respect aliasing as well as using custom naming for the default import

    Ez pz lemon squeezy

    The codemod will change the inputRef prop to ref

    - <Range inputRef={inputRef} />
+ <Range ref={inputRef} />

- <Range
-   inputRef={ref => {
-     myRangeRef = ref;
-   }}
- />
+ <Range
+   ref={ref => {
+     myRangeRef = ref;
+   }}
+ />

3.0.12

Patch Changes

3.0.11

Patch Changes

3.0.10

Patch Changes

  • [patch]557a8e2451:

    Rebuilds package to fix typescript typing error.

3.0.9

Patch Changes

  • [patch]35d2229b2a:

    Adding missing license to packages and update to Copyright 2019 Atlassian Pty Ltd.

3.0.8

3.0.7

Patch Changes

  • [patch]097b696613:

    Components now depend on TS 3.6 internally, in order to fix an issue with TS resolving non-relative imports as relative imports

3.0.6

Patch Changes

3.0.5

Patch Changes

  • [patch]708028db86:

    Change all the imports to theme in Core to use multi entry points

3.0.4

Patch Changes

  • [patch]de35ce8c67:

    Updates component maintainers

3.0.3

Patch Changes

  • [patch]f34776be97:

    Type definition files are now referenced in package.json

3.0.2

3.0.1

Patch Changes

  • [patch]4615439434:

    index.ts will now be ignored when publishing to npm

3.0.0

Major Changes

  • [major]4a08d1912e:

    @atlaskit/range has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No API or behavioural changes.

2.0.2

2.0.1

2.0.0

  • [major]7c17b35107:

    • Updates react and react-dom peer dependencies to react@^16.8.0 and react-dom@^16.8.0. To use this package, please ensure you use at least this version of react and react-dom.

1.0.0

  • [major]546b636a36:

    • This major release indicates that this package is no longer under dev preview but is ready for use

0.2.2

  • [patch]1f2a181b0f:

    • onChange is no longer overridden by spread props. As a result this component should now work in uncontrolled mode

0.2.1

0.2.0

  • [minor]76299208e6:

    • Drop ES5 from all the flow modules

    Dropping CJS support in all @atlaskit packages

    As a breaking change, all @atlaskit packages will be dropping cjs distributions and will only distribute esm. This means all distributed code will be transpiled, but will still contain import and export declarations.

    The major reason for doing this is to allow us to support multiple entry points in packages, e.g:

    import colors from `@atlaskit/theme/colors`;

    Previously this was sort of possible for consumers by doing something like:

    import colors from `@atlaskit/theme/dist/esm/colors`;

    This has a couple of issues. 1, it treats the file system as API making internal refactors harder, we have to worry about how consumers might be using things that aren't actually supposed to be used. 2. We are unable to do this internally in @atlaskit packages. This leads to lots of packages bundling all of theme, just to use a single color, especially in situations where tree shaking fails.

    To support being able to use multiple entrypoints internally, we unfortunately cannot have multiple distributions as they would need to have very different imports from of their own internal dependencies.

    ES Modules are widely supported by all modern bundlers and can be worked around in node environments.

    We may choose to revisit this solution in the future if we find any unintended condequences, but we see this as a pretty sane path forward which should lead to some major bundle size decreases, saner API's and simpler package architecture.

    Please reach out to #fabric-build (if in Atlassian) or create an issue in Design System Support (for external) if you have any questions or queries about this.

0.1.3

  • [patch]aab267bb3a:

    • Added test to make sure the props are passed down to hidden input

0.1.2

0.1.1

  • [patch]d13242d:

    • Change API to experimental theming API to namespace component themes into separate contexts and make theming simpler. Update all dependant components.

0.1.0