from nicegui import ui

def main():
    with ui.splitter(value=30) as splitter:
        splitter.style('width: 100%; height: 100%;')
        with splitter.before:
            with ui.list().props('dense separator'):
                ui.item('Sweet Child o\' Mine')
                ui.item('Elembivos')
                ui.item('Tears of the Dragon')
                ui.item('Victory Song')
        with splitter.after:
            with ui.column() as column:
                column.style('width: 100%;')

                ui.slider(min=0, max=120, value=100)

                with ui.row():
                    ui.button('-5')
                    ui.slider(min=50, max=120, step=5, value=100)
                    ui.button('+5')

                ui.slider(min=0, max=100, value=0)

                with ui.row():
                    ui.button('Prev')
                    ui.button('-25%')
                    ui.button('-5%')
                    ui.button('-1%')
                    ui.button('+1%')
                    ui.button('+5%')
                    ui.button('+25%')
                    ui.button('Next')

                with ui.row():
                    ui.button('Set A')
                    ui.button('Set B')
                    ui.button('Previous AB')
                    ui.button('Next AB')

                with ui.row():
                    ui.button('Toggle AB')
                    ui.button('Stop')
                    ui.button('Start')
                    ui.button('Jump to A')
    ui.run()

if __name__ in {'__main__', '__mp_main__'}:
    main()