Skip to content

Releases: tajo/react-range

v1.10.0

07 Aug 06:54
e13a6ad
Compare
Choose a tag to compare

Minor Changes

  • 92cd0ff Thanks @tajo! - Improving a11y of the slider by adding new label properties.

v1.9.2

21 Jul 20:29
d2bd6cd
Compare
Choose a tag to compare

Patch Changes

v1.9.1

21 Jul 05:47
06e392e
Compare
Choose a tag to compare

Patch Changes

Draggable Track

30 Sep 20:14
Compare
Choose a tag to compare

You can make the track draggable by setting draggableTrack prop to true:

93664954-fb722900-fa72-11ea-90c8-207cd2463ee2

Also, when this feature is not enabled, clicking on the track moves the closest thumb to it (previously this worked only when there was a single thumb).

🎉 This feature has been created by @felix-kaestner!

Add support to render a mark at each step

14 Sep 20:24
Compare
Choose a tag to compare

93007943-c4a48c00-f523-11ea-933b-6200728ed663

There is a new API:

renderMark?: (params: {
  props: {
    key: string;
    style: React.CSSProperties;
    ref: React.RefObject<any>;
  };
  index: number;
}) => React.ReactNode;

Your marks will get automatically centered and positioned.

Focusing thumb after a click

23 Jan 17:44
Compare
Choose a tag to compare

When you drag and drop a thumb, it will get focused now so you can immediately use keyboard shortcuts (arrow) to keep moving it further.

Added onFinalChange callback

24 Sep 00:47
Compare
Choose a tag to compare

onFinalChange is called only when the drag&drop is finished (key up / mouse up). That's different from onChange that fires during the move.

#36

Added support for RTL

16 Aug 19:57
Compare
Choose a tag to compare

Now you can switch the component into the right-to-left mode through the rtl prop.

Screen Shot 2019-08-16 at 9 56 24 PM

Merge overlapping labels

16 Jul 19:02
Compare
Choose a tag to compare

There is a new hook useThumbOverlap that will help you to merge overlapping labels:

mergelabels

Contribution by @jh3y! Thanks!