nicegui/website/more_documentation/slider_documentation.py

from nicegui import ui

from ..documentation_tools import text_demo


def main_demo() -> None:
    slider = ui.slider(min=0, max=100, value=50)
    ui.label().bind_text_from(slider, 'value')


def more() -> None:
    @text_demo('Throttle events with leading and trailing options', '''
        By default the value change event of a slider is throttled to 0.05 seconds.
        This means that if you move the slider quickly, the value will only be updated every 0.05 seconds.

        By default both "leading" and "trailing" events are activated.
        This means that the very first event is triggered immediately, and the last event is triggered after the throttle time.

        This demo shows how disabling either of these options changes the behavior.
        To see the effect more clearly, the throttle time is set to 1 second.
        The first slider shows the default behavior, the second one only sends leading events, and the third only sends trailing events.
    ''')
    def throttle_events_with_leading_and_trailing_options():
        ui.label('default')
        ui.slider(min=0, max=10, step=0.1, value=5).props('label-always') \
            .on('update:model-value', lambda msg: ui.notify(f'{msg["args"]}'),
                throttle=1.0)

        ui.label('leading events only')
        ui.slider(min=0, max=10, step=0.1, value=5).props('label-always') \
            .on('update:model-value', lambda msg: ui.notify(f'{msg["args"]}'),
                throttle=1.0, trailing_events=False)

        ui.label('trailing events only')
        ui.slider(min=0, max=10, step=0.1, value=5).props('label-always') \
            .on('update:model-value', lambda msg: ui.notify(f'{msg["args"]}'),
                throttle=1.0, leading_events=False)