build_tools.tui_common.controls.sliders

Float slider control widget.

This module provides the FloatSlider widget for float parameter control with keyboard and mouse support.

Features:

Keyboard navigation: +/- or j/k or arrow keys to adjust
Configurable step size and decimal precision
Optional suffix text display
Posts Changed message when value updates
Focusable with visual feedback

Example Usage:

from build_tools.tui_common.controls import FloatSlider
from textual import on

class MyApp(App):
    def compose(self) -> ComposeResult:
        yield FloatSlider(
            label="Temperature",
            value=0.5,
            min_val=0.0,
            max_val=1.0,
            step=0.1,
            precision=2,
            suffix="bias",
            id="temperature-slider",
        )

    @on(FloatSlider.Changed)
    def on_slider_changed(self, event: FloatSlider.Changed) -> None:
        print(f"Slider {event.widget_id} = {event.value}")

Classes

FloatSlider

Float slider widget with keyboard and mouse support.

Module Contents

class build_tools.tui_common.controls.sliders.FloatSlider(label, value, min_val, max_val, step=0.1, precision=1, suffix=None, *args, **kwargs)[source]

Bases: textual.widgets.Static

Float slider widget with keyboard and mouse support.

A horizontal widget displaying a label, current value in brackets, and optional suffix. Users can adjust the value using keyboard shortcuts while the widget has focus.

label_text: Display label shown before the value

value: Current float value (clamped to min/max range)

min_val: Minimum allowed value

max_val: Maximum allowed value

step: Amount to increment/decrement per keypress

precision: Number of decimal places to display

suffix: Optional text shown after the value

Keybindings:

+ or = or j or down: Increment value by step
- or _ or k or up: Decrement value by step

Messages:

Changed: Posted when value changes, includes new value and widget ID

CSS Classes:

.slider-label: Label element (width: 15, right-aligned)
.slider-value: Value display (width: 8, centered, highlighted on focus)
.slider-suffix: Suffix text (auto width, muted color)

Initialize float slider.

Parameters:

label (str) – Display label shown before the value
value (float) – Initial value (will be clamped to min/max range)
min_val (float) – Minimum allowed value
max_val (float) – Maximum allowed value
step (float) – Increment/decrement step size (default: 0.1)
precision (int) – Number of decimal places to display (default: 1)
suffix (str | None) – Optional static suffix text to display after value
*args – Additional positional arguments passed to Static
**kwargs – Additional keyword arguments passed to Static

BINDINGS = [('+', 'increment', 'Increment'), ('=', 'increment', 'Increment'), ('j', 'increment',...: A list of key bindings.

class Changed(value, widget_id)[source]

Bases: textual.message.Message

Message posted when the slider value changes.

value: The new float value after the change

widget_id: The ID of the widget that posted this message, or None

Initialize the Changed message.

Parameters:

value (float) – The new slider value
widget_id (str | None) – ID of the slider widget that changed

value

widget_id

DEFAULT_CSS = Multiline-String

Show Value

"""
    FloatSlider {
        layout: horizontal;
        height: 1;
        width: 100%;
    }

    FloatSlider .slider-label {
        width: 15;
        text-align: right;
        padding-right: 1;
    }

    FloatSlider .slider-value {
        width: 8;
        text-align: center;
        background: $boost;
    }

    FloatSlider:focus .slider-value {
        background: $accent;
        text-style: bold;
    }

    FloatSlider .slider-suffix {
        width: auto;
        padding-left: 1;
        color: $text-muted;
    }
    """

Default TCSS.

label_text

value

min_val

max_val

step = 0.1

precision = 1

suffix = ''

compose()[source]

Create the slider layout.

Layout: [Label:] [value] [suffix]

Yields:: Label widgets for label, value display, and suffix

on_mount()[source]

Configure widget after mounting.

Makes the widget focusable for keyboard navigation. Focus state is used to highlight the value display.

action_increment()[source]

Increment value by step, clamped to max.

Only posts Changed message if value actually changed.

action_decrement()[source]

Decrement value by step, clamped to min.

Only posts Changed message if value actually changed.

set_value(value)[source]

Set value programmatically, clamped to range.

Use this method to update the slider value from code. Posts Changed message if value actually changed.

Parameters:: value (float) – New value (will be clamped to min/max range)