Skip to content

CupertinoSlider

An iOS-type slider.

It provides a visual indication of adjustable content, as well as the current setting in the total range of content.

Use a slider when you want people to set defined values (such as volume or brightness), or when people would benefit from instant feedback on the effect of setting changes.

ft.CupertinoSlider(value=0.6)

CupertinoSlider

Basic CupertinoSlider

Inherits: LayoutControl

Properties

Events

Examples#

Live example

Handling events#

import flet as ft


def main(page: ft.Page):
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.theme_mode = ft.ThemeMode.LIGHT

    def handle_change_start(e: ft.Event[ft.CupertinoSlider]):
        slider_status.value = "Sliding"
        page.update()

    def handle_change(e: ft.Event[ft.CupertinoSlider]):
        slider_value.value = str(e.control.value)
        page.update()

    def handle_change_end(e: ft.Event[ft.CupertinoSlider]):
        slider_status.value = "Finished sliding"
        page.update()

    page.add(
        slider_value := ft.Text("0.0"),
        ft.CupertinoSlider(
            divisions=20,
            min=0,
            max=100,
            active_color=ft.Colors.PURPLE,
            thumb_color=ft.Colors.PURPLE,
            on_change_start=handle_change_start,
            on_change_end=handle_change_end,
            on_change=handle_change,
        ),
        slider_status := ft.Text(),
    )


ft.run(main)

handling-events

Properties#

active_color class-attribute instance-attribute #

active_color: ColorValue | None = None

The color to use for the portion of the slider track that is active.

The "active" side of the slider is the side between the thumb and the minimum value.

divisions class-attribute instance-attribute #

divisions: int | None = None

The number of discrete divisions.

If None, the slider is continuous.

max class-attribute instance-attribute #

max: Number = 1.0

The maximum value the user can select.

Note
  • Must be greater than or equal to min.
  • If the min is equal to the max, then this slider is disabled.

Raises:

min class-attribute instance-attribute #

min: Number = 0.0

The minimum value the user can select.

Note
  • Must be less than or equal to max.
  • If the max is equal to the min, then this slider is disabled.

Raises:

thumb_color class-attribute instance-attribute #

thumb_color: ColorValue | None = None

The color of this slider's thumb.

value class-attribute instance-attribute #

value: Number | None = None

The currently selected value for this slider.

The slider's thumb is drawn at a position that corresponds to this value.

Raises:

Events#

on_blur class-attribute instance-attribute #

on_blur: ControlEventHandler[CupertinoSlider] | None = None

Called when this slider has lost focus.

on_change class-attribute instance-attribute #

on_change: ControlEventHandler[CupertinoSlider] | None = (
    None
)

Called when the state of this slider changed.

on_change_end class-attribute instance-attribute #

on_change_end: (
    ControlEventHandler[CupertinoSlider] | None
) = None

Called when the user is done selecting a new value for this slider.

on_change_start class-attribute instance-attribute #

on_change_start: (
    ControlEventHandler[CupertinoSlider] | None
) = None

Called when the user starts selecting a new value for this slider.

on_focus class-attribute instance-attribute #

on_focus: ControlEventHandler[CupertinoSlider] | None = None

Called when this slider has received focus.