Slider interface for managing letter ranges in the Russian alphabet - how and with what?

Question

PHP

There is such a subtask, to develop a JavaScript interface that allows you to divide the entire Russian alphabet into ranges of letters. It might look something like this:

i.e. in the interface, we have the ability to divide the alphabet of letters from A to Z into parts of any size.

The data from this interface will be saved as parts of the alphabet: 1) A-D 2) D-Z 3) F-O 4) P-Z

The Add Range button will add a new range (new part) to the slider.

jQuery UI has a standard slider: jqueryui.com/slider/#range , but there are only two sliders, but I need to make sure that sliders (limiters of range parts) can be added while working with the interface.

I will save and process all this in PHP, so of course it’s also interesting how to get these ranges as arrays in POST, for example.

I understand that such a ready-made solution cannot be found for sure, but still, can anyone advise something from the ready-made that is closest to my task?

Answer 1

It seems to me that range is not very appropriate here (there cannot be more than two points), but it is more convenient to do something like this: codepen.io/simeydotme/pen/AyELv