Slider

A single-handle track for selecting a numeric value within a range.

Usage

Basic

bs.Slider()
bs.Slider(50, min_value=0, max_value=100)

Accent colors

bs.Slider(50, accent="primary")
bs.Slider(50, accent="secondary")
bs.Slider(50, accent="info")
bs.Slider(50, accent="success")
bs.Slider(50, accent="warning")
bs.Slider(50, accent="danger")

Value badge

Set show_value=True to display a floating badge with the current value above the handle.

bs.Slider(50, show_value=True)

Min / max labels

Set show_minmax=True to display the minimum and maximum values at the track ends.

bs.Slider(50, show_minmax=True)

Tick marks

Use tick_step= to add major tick marks. minor_ticks= adds subdivisions between them. tick_labels=False hides the numeric labels. tick_format= controls how tick and badge labels are formatted.

bs.Slider(50, tick_step=25)
bs.Slider(50, tick_step=25, minor_ticks=4)
bs.Slider(0.5, min_value=0, max_value=1, tick_step=0.25, tick_format="{:.0%}", show_value=True)

Reactive binding

Bind a Signal[float] with signal=. The slider and signal stay in sync.

volume = bs.Signal(50.0)
bs.Slider(signal=volume)
volume.subscribe(lambda v: update_volume(v))

Disabled

bs.Slider(60, disabled=True)

Widget sizing

All widgets accept self-placement kwargs via **kwargs. The parent container determines which options apply — stack-based parents use stack kwargs, grid-based parents use grid kwargs. Unrecognised keys are silently ignored.

Stack

Used inside VStack, HStack, App, and other stack containers.

fill	Fill direction: 'x', 'y', 'both', or 'none'.
expand	Grow to consume extra space in the parent. True or False.
anchor	Alignment when the widget does not fill the available slot: 'n', 's', 'e', 'w', 'center', 'nw', etc.
margin	External spacing in pixels. Accepts an integer (equal on all sides), a 2-tuple (horizontal, vertical), or a 4-tuple (left, top, right, bottom).
margin_x	Horizontal external spacing (left and right). Accepts an integer or a 2-tuple (left, right) for asymmetric spacing. Overrides the horizontal component of margin=.
margin_y	Vertical external spacing (top and bottom). Accepts an integer or a 2-tuple (top, bottom) for asymmetric spacing. Overrides the vertical component of margin=.

Grid

Used inside a Grid container.

row / column	Zero-based row and column indices.
rowspan / columnspan	Number of rows or columns to span.
sticky	Alignment and fill within the grid cell. Any combination of 'n', 's', 'e', 'w' — e.g. 'ew' stretches horizontally, 'nsew' fills the entire cell.
margin	External spacing in pixels. Accepts an integer, a 2-tuple (horizontal, vertical), or a 4-tuple (left, top, right, bottom).
margin_x	Horizontal external spacing. Accepts an integer or (left, right).
margin_y	Vertical external spacing. Accepts an integer or (top, bottom).

See also

• RangeSlider — two-handle range selection

• NumberField — numeric input with typed entry

API

The complete reference for Slider lives on the Widgets API page. At a glance:

Slider

A single-handle slider for selecting a numeric value within a range.

Full Example

with bs.App(title="Slider Demo", padding=20, gap=16) as app:

    # Basic
    bs.Label("Basic", font="heading-sm")
    bs.Slider(fill="x")

    # Accent colors
    bs.Label("Accent Colors", font="heading-sm")
    with bs.VStack(gap=6, fill="x"):
        for accent in ("primary", "secondary", "info", "success", "warning", "danger"):
            bs.Slider(50, accent=accent, fill="x")

    # Value badge
    bs.Label("Value Badge", font="heading-sm")
    bs.Slider(50, show_value=True, fill="x")

    # Min / max labels
    bs.Label("Min / Max Labels", font="heading-sm")
    bs.Slider(50, show_minmax=True, fill="x")

    # Tick marks
    bs.Label("Tick Marks", font="heading-sm")
    bs.Slider(50, tick_step=25, fill="x")
    bs.Slider(50, tick_step=25, minor_ticks=4, fill="x")
    bs.Slider(50, tick_step=25, show_value=True, show_minmax=True, fill="x")

    # Custom tick format
    bs.Label("Custom Tick Format", font="heading-sm")
    bs.Slider(
        0.5,
        min_value=0.0,
        max_value=1.0,
        tick_step=0.25,
        tick_format="{:.0%}",
        show_value=True,
        fill="x",
    )

    # Disabled
    bs.Label("Disabled", font="heading-sm")
    bs.Slider(30, disabled=True, fill="x")

app.run()