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

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.theme_mode = ft.ThemeMode.DARK
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    page.appbar = ft.AppBar(title="SliderInteraction Showcase")
    page.add(
        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],
        ),
    )


ft.run(main)

Properties

SLIDE_ONLY = 'slideOnly' class-attribute instance-attribute

Allows only sliding interaction to change the value.

Track taps are ignored.

SLIDE_THUMB = 'slideThumb' class-attribute instance-attribute

Allows interaction only by dragging the slider thumb.

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

TAP_AND_SLIDE = 'tapAndSlide' class-attribute instance-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_ONLY = 'tapOnly' class-attribute instance-attribute

Allows only tap interaction on the slider track.

Drag/sliding gestures are ignored.