Zoom with a custom slider in a navigated viewer

I want to create a website with a navigated viewer. The website contains a custom slider which should provide the zoom functionality since the user has to use Ctrl+Mouse Wheel by default to zoom in and out. Some users don’t know this, so the slider might be helpful.
I use the zoom scroll functions (How add zoom [+] and zoom [-]) However, I don’t know how to get the current zoom distance.
I don’t want to store the current delta manually since it might change in other calls like resetting the zoom etc.and I didn’t find any way to register a callback which is called when the delta changes.
I found ZoomScroll._totalDelta but it seems to be 0 all the time.
Is there any way to get the current delta/distance and use it when chaning the slider to pass a correct delta?

Btw. is there any option to reenable zooming with the mouse wheel (without Ctrl)?

Canvas has a function called zoom. If you call this function without any arguments it will return the current zoom. I’ve created a small example of using a range input for zooming: https://codesandbox.io/s/bpmn-js-zoom-through-range-input-kzx8p

As for zooming with the mouse wheel only, this behavior is hard-coded:

If you want to change this behavior you have to override this module.

Hey, thx but in your example when I use the mouse wheel and Ctrl to zoom it won’t affect the slider. Is there no way to register a callback which will move the slider?

You can listen for the canvas.viewbox.changing event which is fired before the zoom is changed and for canvas.viewbox.changed which is fired afterwards.