跳到主要内容

范围滑块 RangeSlider

一个 Material Design 风格的范围滑块。用于在一组值中选择一个范围。 范围滑块可以用来选择连续或离散的值集。 默认情况下，使用从最小值到最大值的连续值范围。

示例​

在线示例

带分割线和标签的范围滑块​

import flet as ft


def main(page: ft.Page):
    range_slider = ft.RangeSlider(
        min=0,
        max=50,
        start_value=10,
        divisions=10,
        end_value=20,
        inactive_color=ft.colors.GREEN_300,
        active_color=ft.colors.GREEN_700,
        overlay_color=ft.colors.GREEN_100,
        label="{value}%",
    )

    page.add(
        ft.Column(
            horizontal_alignment=ft.CrossAxisAlignment.CENTER,
            controls=[
                ft.Text(
                    "带分割线和标签的范围滑块",
                    size=20,
                    weight=ft.FontWeight.BOLD,
                ),
                ft.Container(height=30),
                range_slider,
            ],
        )
    )


ft.app(target=main)

带事件的范围滑块​

import flet as ft


def main(page: ft.Page):
    def slider_change_start(e):
        print(
            f"滑块开始改变，值为 {e.control.start_value}, {e.control.end_value}"
        )

    def slider_is_changing(e):
        print(
            f"滑块正在改变，值为 {e.control.start_value}, {e.control.end_value}"
        )

    def slider_change_end(e):
        print(
            f"滑块改变结束，值为 {e.control.start_value}, {e.control.end_value}"
        )

    range_slider = ft.RangeSlider(
        min=0,
        max=50,
        start_value=10,
        end_value=20,
        on_change_start=slider_change_start,
        on_change=slider_is_changing,
        on_change_end=slider_change_end,
    )

    page.add(
        ft.Column(
            horizontal_alignment=ft.CrossAxisAlignment.CENTER,
            controls=[
                ft.Text(
                    "带事件的范围滑块",
                    size=20,
                    weight=ft.FontWeight.BOLD,
                ),
                ft.Container(height=30),
                range_slider,
            ],
        )
    )


ft.app(target=main)

属性​

active_color​

用于滑块轨道上当前活动部分的颜色。

"活动"段是两个滑块之间的范围。

divisions​

离散分割线的数量。

通常与 label 一起使用以显示当前离散值。

如果不设置，则滑块是连续的。

end_value​

滑块当前选择的结束值。

滑块的右边的滑块将在对应此值的位置绘制。

inactive_color​

滑块轨道上非活动部分的颜色。

非活动段是在最小值和开始滑块之间以及结束滑块和最大值之间的轨道段落。

label​

可以包含 {value} 用于格式化的字符串。

在滑块处于活动状态时，显示在滑块上方的标签。label 的值可以包含 {value}，将被当前滑块的 start_value 和 end_value 替换。

如果不设置，则不显示标签。

max​

用户可以选择的最大值。

默认为 1.0。必须大于或等于 min。

如果 max 等于 min，则滑块被禁用。

min​

用户可以选择的最小值。

默认为 0.0。必须小于或等于 max。

如果 max 等于 min，则滑块被禁用。

overlay_color​

用于高亮显示滑块拇指的颜色，表示范围滑块拇指正在被悬停或拖动。

round​

在包含 {value} 的 label 上显示的小数位数。默认值为 0（值四舍五入为最接近的整数）。

start_value​

滑块当前选择的起始值。

滑块的左边的滑块将在对应此值的位置绘制。

事件​

on_change​

在滑块的状态发生改变时触发。

on_change_end​

在用户完成选择滑块的新值时触发。

on_change_start​

在用户开始选择滑块的新值时触发。