react-range

Minor Changes

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

Patch Changes

• #197 1d6d5e6 Thanks @tajo! - Accept any version of React

Patch Changes

• #194 9a48078 Thanks @tajo! - Better tooling

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

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!

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.

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.

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

https://github.com/tajo/react-range/pull/36

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

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

Contribution by @jh3y! Thanks!