Control zoom by scrolling zoom slider

When your cursor is over the zoom slider, let scroll wheel control the zoom. This will allow you to zoom more quickly. Instead of having to put your cursor directly on the slider drag tab, you can put your cursor anywhere on the slider and just scroll; you get a bigger activation area and you don’t have to click+drag a small component. This also helps counter some of current friction from navigating large spaces.

Examples:

  • YouTube volume slider.
  • Reactflow framework let’s you control zoom via scrollwheel when you hover over MiniMap and scroll. See: Feature Overview - React Flow. In this example they haven’t fine tuned the MiniMap zoomStep so it zooms a lot. But it gives the general idea.
1 Like

zooming on wheel events that happen on top of zoom slider shipped

3 Likes