Skip to main content

SliderInteraction

Defines how users can interact with a Slider to change its value.

Each mode controls whether taps and drag gestures on the slider track are accepted, and whether interaction is restricted to dragging the thumb.

Inherits: enum.Enum

Properties

  • SLIDE_ONLY - Allows only sliding interaction to change the value.
  • SLIDE_THUMB - Allows interaction only by dragging the slider thumb.
  • TAP_AND_SLIDE - Allows the user to interact with a slider by tapping or sliding anywhere on the track.
  • TAP_ONLY - Allows only tap interaction on the slider track.

Examples​

Showcase​

import flet as ft


def showcase_card(interaction: ft.SliderInteraction) -> ft.Container:
    value_text = ft.Text("Value: 50")

    def on_change(e: ft.Event[ft.Slider]):
        value_text.value = f"Value: {round(e.control.value)}"
        value_text.update()

    return ft.Container(
        width=340,
        padding=12,
        border=ft.Border.all(1, ft.Colors.RED),
        border_radius=10,
        bgcolor=ft.Colors.SURFACE_CONTAINER_LOW,
        content=ft.Column(
            spacing=8,
            controls=[
                ft.Text(interaction.name, weight=ft.FontWeight.BOLD),
                value_text,
                ft.Container(
                    width=260,
                    padding=ft.Padding.symmetric(horizontal=8),
                    border=ft.Border.all(1, ft.Colors.OUTLINE),
                    border_radius=8,
                    bgcolor=ft.Colors.SURFACE,
                    content=ft.Slider(
                        min=0,
                        max=100,
                        value=50,
                        divisions=20,
                        interaction=interaction,
                        on_change=on_change,
                    ),
                ),
                ft.Text("Try tapping track and dragging thumb.", size=11),
            ],
        ),
    )


def main(page: ft.Page):
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    page.appbar = ft.AppBar(title="SliderInteraction Showcase")
    page.add(
        ft.SafeArea(
            content=ft.Column(
                controls=[
                    ft.Text("Compare which gestures are accepted by each slider mode."),
                    ft.Row(
                        wrap=True,
                        spacing=12,
                        expand=True,
                        scroll=ft.ScrollMode.AUTO,
                        alignment=ft.MainAxisAlignment.CENTER,
                        controls=[showcase_card(i) for i in ft.SliderInteraction],
                    ),
                ],
            ),
        )
    )


if __name__ == "__main__":
    ft.run(main)

Properties​

SLIDE_ONLYclass-attributeinstance-attribute​

Allows only sliding interaction to change the value.

Track taps are ignored.

SLIDE_THUMBclass-attributeinstance-attribute​

Allows interaction only by dragging the slider thumb.

Taps and drag/slide gestures that begin on the track are ignored.

TAP_AND_SLIDEclass-attributeinstance-attribute​

Allows the user to interact with a slider by tapping or sliding anywhere on the track.

Essentially all possible interactions are allowed.

It is different from SLIDE_ONLY, in that when you try to slide anywhere other than the thumb, the thumb will move to the first point of contact.

TAP_ONLYclass-attributeinstance-attribute​

Allows only tap interaction on the slider track.

Drag/sliding gestures are ignored.