How to render this input range?

Question

css

Good afternoon. There is such an input design for layout for React.



What is the best way to layout it? Maybe it would be better not even through input, but somehow, according to the classics, on divs? I have no idea how to implement such a range switch. Maybe someone knows ready-made components? I found only react-range, but it doesn't fit

Answer 1

Wrap 3 blocks in flex or grid, on + and - hang the click event, but the input event. If the number should not be edited from the keyboard, then just a block with a number. And make it a separate component. Might come in handy elsewhere. There is no need for any libs here, for a maximum of half an hour of work