How to implement custom Yandex map scale control?

Question

css

Good afternoon,
the designer wanted a custom slider to control the scale of Yandex maps:

There are only two states on the slider - large and small, so it can be implemented as a button.
found only general information on API 2.1
https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/refe...
and primitive examples for version 1.0
https://tech.yandex.ru/maps/doc /jsapi/1.x/dg/conce...
Has anyone had a similar experience?
Or can you share links to examples?
Thank you.

Answer 1

Everything turned out to be easy and simple.
The slider is a simple div with a before or after pseudo-class that implements a dot.
We make a normal click handler and create a flag.
When clicking, we check the flag, if true means a small zoom and do
map.setZoom(map.getZoom() - 3);
and change the value of the flag to false
, respectively, if the flag is false, then map.setZoom(map.getZoom() + 3); and change the flag to true.
Here are useful links if something more complicated needs to be implemented:
https://yandex.ru/blog/mapsapi/44554
https://habrahabr.ru/post/161763/