Draggable Track

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!

Add support to render a mark at each step

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

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

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

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

Merge overlapping labels

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

Contribution by @jh3y! Thanks!