Skip to main content

Slider

A Shadcn slider for picking a number from a range.

The slider needs a bounded width: inside a Row, set width or expand.

Example:

shad.Slider(value=0.33, width=300)
shad.Slider(value=50, min=0, max=100, divisions=10)
Slider
Slider

Inherits: LayoutControl

Properties

Events

Example​

Shadcn Slider​

play_arrowTry Online
import flet_shadcn_ui as shad

import flet as ft


def main(page: ft.Page):
    page.title = "Shadcn Slider"

    def handle_change(e: ft.Event[shad.Slider]):
        volume.value = f"Volume: {int(e.control.value)}"

    volume = ft.Text("Volume: 50")

    page.add(
        ft.SafeArea(
            content=ft.Column(
                width=320,
                spacing=16,
                controls=[
                    volume,
                    shad.Slider(
                        key="volume",
                        value=50,
                        min=0,
                        max=100,
                        divisions=10,
                        on_change=handle_change,
                    ),
                    shad.Slider(value=0.3, disabled=True),
                ],
            )
        )
    )


if __name__ == "__main__":
    ft.run(main)
slider
Dragging the volume slider

Properties​

active_track_colorclass-attributeinstance-attribute​

active_track_color: ColorValue | None = None

The color of the track between min and the thumb.

If None, the primary color of the theme is used.

divisionsclass-attributeinstance-attribute​

divisions: int | None = None

The number of equal steps between min and max.

If None, any value in the range can be picked.

Raises:

  • ValueError - If it is not strictly greater than 0.

inactive_track_colorclass-attributeinstance-attribute​

inactive_track_color: ColorValue | None = None

The color of the track between the thumb and max.

If None, the secondary color of the theme is used.

maxclass-attributeinstance-attribute​

max: Number = 1.0

The largest value.

Raises:

  • ValueError - If it is not strictly greater than min.

minclass-attributeinstance-attribute​

min: Number = 0.0

The smallest value.

Raises:

  • ValueError - If it is not strictly less than max.

thumb_colorclass-attributeinstance-attribute​

thumb_color: ColorValue | None = None

The fill color of the thumb.

If None, the background color of the theme is used.

valueclass-attributeinstance-attribute​

value: Number = 0.0

The current value, between min and max.

Raises:

  • ValueError - If it is not greater than or equal to min.
  • ValueError - If it is not less than or equal to max.

Events​

on_changeclass-attributeinstance-attribute​

on_change: ControlEventHandler[Slider] | None = None

Called continuously while the user drags the thumb.

The data property of the event handler argument contains the new value.

on_change_endclass-attributeinstance-attribute​

on_change_end: ControlEventHandler[Slider] | None = None

Called when the user releases the thumb.

The data property of the event handler argument contains the final value.

on_change_startclass-attributeinstance-attribute​

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

Called when the user starts dragging the thumb.