滑块 Slider

此元素基于 Quasar 的 QSlider 组件。

参数 Param	说明 Description
min	滑块的最小值
max	滑块的最大值
step	滑块的步进
value	滑块的初始值
on_change	当滑块的值改变时执行的回调函数，拖动过程中也会触发（如果只想在松开滑块时响应，请改用 .on('change', ...)）

from nicegui import ui

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

ui.run()

使用前导和尾随选项节流事件

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

默认情况下，"前导"和"尾随"事件都会被激活。这意味着第一个事件会立即触发，最后一个事件会在节流时间后触发。

此演示显示了禁用这些选项中的任何一个如何改变行为。为了更清楚地看到效果，节流时间设置为 1 秒。第一个滑块显示默认行为，第二个仅发送前导事件，第三个仅发送尾随事件。

from nicegui import ui

ui.label('默认')
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('仅前导事件')
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('仅尾随事件')
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()

禁用滑块

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

from nicegui import ui

slider = ui.slider(min=0, max=100, value=50)
ui.button('禁用滑块', on_click=slider.disable)
ui.button('启用滑块', on_click=slider.enable)

ui.run()