滑块

这个元素是基于Quasar的QSlider组件。

• min：滑块的下界

• max：滑块的上界

• step：步长

• value：设置滑块初始位置的值

• on_change：当用户释放滑块时调用的回调函数

from nicegui import ui

slider = ui.slider(min=0, max=100, value=50)
ui.label().bind_text_from(slider, 'value')

# ui.run()

<nicegui.elements.label.Label at 0x7f3be6b1f9d0>

限制事件的触发频率，包括首尾事件选项

默认情况下，滑块的值改变事件被限制为0.05秒。这意味着如果你快速移动滑块，值只会每0.05秒更新一次。

默认情况下，”首部”和”尾部”事件都是激活的。这意味着第一个事件会立即触发，最后一个事件会在限制时间后触发。

这个示例展示了禁用这些选项中的任何一个是如何改变行为的。为了更清楚地看到效果，限制时间设置为1秒。第一个滑块显示默认行为，第二个只发送首部事件，第三个只发送尾部事件。

from nicegui import ui

ui.label('default')
ui.slider(min=0, max=10, step=0.1, value=5).props('label-always') \
    .on('update:model-value', lambda e: ui.notify(e.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 e: ui.notify(e.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 e: ui.notify(e.args),
        throttle=1.0, leading_events=False)

# ui.run()

<nicegui.elements.slider.Slider at 0x7f3ba4385360>

禁用滑块

您可以使用 disable() 方法来禁用滑块。这将阻止用户移动滑块。滑块也会变成灰色。

from nicegui import ui

slider = ui.slider(min=0, max=100, value=50)
ui.button('Disable slider', on_click=slider.disable)
ui.button('Enable slider', on_click=slider.enable)

# ui.run()

<nicegui.elements.button.Button at 0x7f3ba4387d60>