RangeSlider

A two-handle track for selecting a low/high value range.

Usage

Basic

bs.RangeSlider(20, 80)
bs.RangeSlider(0, 50, min_value=0, max_value=100)

Show value badges

Set show_value=True to display floating badges on both handles.

bs.RangeSlider(20, 80, show_value=True)

Tick marks

Use tick_step= to add major tick marks. minor_ticks= adds subdivisions between them.

bs.RangeSlider(20, 80, tick_step=20)
bs.RangeSlider(20, 80, tick_step=20, minor_ticks=4, show_value=True)

Accent colors

bs.RangeSlider(20, 80, accent="primary")
bs.RangeSlider(20, 80, accent="secondary")
bs.RangeSlider(20, 80, accent="info")
bs.RangeSlider(20, 80, accent="success")
bs.RangeSlider(20, 80, accent="warning")
bs.RangeSlider(20, 80, accent="danger")

Reactive binding

Bind Signal[float] instances to each handle independently.

lo = bs.Signal(25.0)
hi = bs.Signal(75.0)
bs.RangeSlider(low_signal=lo, high_signal=hi)
lo.subscribe(lambda v: print(f"Low: {v}"))
hi.subscribe(lambda v: print(f"High: {v}"))

Reading the range

Access both handles at once via .value, or individually via .low_value and .high_value.

rs = bs.RangeSlider(20, 80)
lo, hi = rs.value      # → (20.0, 80.0)
rs.low_value  = 30     # move low handle
rs.high_value = 70     # move high handle

Disabled

bs.RangeSlider(20, 80, 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

• Slider — single-handle slider

• NumberField — numeric input with typed entry

API

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

RangeSlider

A two-handle slider for selecting a low/high value range.

Full Example

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

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

    # Value badges
    bs.Label("Value Badges", font="heading-sm")
    bs.RangeSlider(20, 80, show_value=True, fill="x")

    # Tick marks
    bs.Label("Tick Marks", font="heading-sm")
    bs.RangeSlider(20, 80, tick_step=20, fill="x")
    bs.RangeSlider(20, 80, tick_step=20, minor_ticks=4, show_value=True, 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.RangeSlider(20, 80, accent=accent, fill="x")

    # Disabled
    bs.Label("Disabled", font="heading-sm")
    bs.RangeSlider(20, 80, disabled=True, fill="x")

app.run()