RangeSlider

Several stops on one track, each bounded by its neighbours.

import { RangeSlider } from "@glint/components/range-slider.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component Demo inherits Window {
    width: 560px;
    height: 300px;
    background: Tokens.color-background;

    in-out property <[float]> price-range: [25, 75];

    VerticalLayout {
        alignment: center;
        spacing: 16px;
        padding: 24px;

        HorizontalLayout {
            alignment: center;

            VerticalLayout {
                width: 360px;

                RangeSlider {
                    minimum: 0;
                    maximum: 100;
                    step: 5;
                    values <=> root.price-range;
                    labels: ["Minimum Budget", "Maximum Budget"];
                }
            }
        }

        Text {
            text: "Range: $" + Math.round(root.price-range[0]) + " – $" + Math.round(root.price-range[1]);
            color: Tokens.color-muted-foreground;
            font-size: Tokens.typography-body-sm-size;
            horizontal-alignment: center;
        }
    }
}

Usage

import { RangeSlider } from "@glint/components/range-slider.slint";

export component AppWindow inherits Window {
    in-out property <[float]> bounds: [10, 90];

    VerticalLayout {
        alignment: center;

        RangeSlider {
            minimum: 0;
            maximum: 100;
            step: 1;
            values <=> root.bounds;
            changed(thumb-index, new-val) => {
                // handle range adjustment
            }
        }
    }
}

RangeSlider allows users to select intervals or sub-ranges across two or more movable thumbs. Thumbs are clamped against their neighboring stops so they can meet but never cross.

Examples

Multi-stop values

values accepts two or more numbers. Providing three or more values creates a multi-stop slider with that number of draggable thumbs.

import { RangeSlider } from "@glint/components/range-slider.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component Demo inherits Window {
    width: 560px;
    height: 300px;
    background: Tokens.color-background;

    in-out property <[float]> stops: [20, 50, 80];

    VerticalLayout {
        alignment: center;
        spacing: 16px;
        padding: 24px;

        HorizontalLayout {
            alignment: center;

            VerticalLayout {
                width: 360px;

                RangeSlider {
                    minimum: 0;
                    maximum: 100;
                    values <=> root.stops;
                    labels: ["Low Threshold", "Medium Threshold", "High Threshold"];
                }
            }
        }

        Text {
            text: "Stops: " + Math.round(root.stops[0]) + " / " + Math.round(root.stops[1]) + " / " + Math.round(root.stops[2]);
            color: Tokens.color-muted-foreground;
            font-size: Tokens.typography-body-sm-size;
            horizontal-alignment: center;
        }
    }
}

Custom labels and stepping

Use labels to supply descriptive accessible names for each thumb in order, and step to define snapping increments.

import { RangeSlider } from "@glint/components/range-slider.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component Demo inherits Window {
    width: 560px;
    height: 300px;
    background: Tokens.color-background;

    in-out property <[float]> hours: [9, 17];

    VerticalLayout {
        alignment: center;
        spacing: 16px;
        padding: 24px;

        HorizontalLayout {
            alignment: center;

            VerticalLayout {
                width: 360px;

                RangeSlider {
                    minimum: 0;
                    maximum: 24;
                    step: 1;
                    values <=> root.hours;
                    labels: ["Start Hour", "End Hour"];
                }
            }
        }

        Text {
            text: "Operating Hours: " + Math.round(root.hours[0]) + ":00 to " + Math.round(root.hours[1]) + ":00";
            color: Tokens.color-muted-foreground;
            font-size: Tokens.typography-body-sm-size;
            horizontal-alignment: center;
        }
    }
}

Disabled state

Setting disabled: true dims the slider and disables drag, click, and keyboard interactions.

import { RangeSlider } from "@glint/components/range-slider.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component Demo inherits Window {
    width: 560px;
    height: 300px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 24px;

        HorizontalLayout {
            alignment: center;

            VerticalLayout {
                width: 360px;

                RangeSlider {
                    disabled: true;
                    values: [30, 70];
                }
            }
        }
    }
}

API Reference

Properties

Property	Type	Default	Description
`values`	`in-out [float]`	`[0, 100]`	Two-way; the stops, in ascending order. Two of them is the interval control; three or more is a multi-stop slider.
`minimum`	`in float`	`0`	Lower bound of the whole range (inclusive).
`maximum`	`in float`	`100`	Upper bound of the whole range (inclusive).
`step`	`in float`	`1`	The grid every user-driven value lands on, counted from `minimum` — same contract as `Slider.step`, pointer and keyboard alike. `0` turns snapping off.
`disabled`	`in bool`	`false`	When true, every thumb dims and stops responding.
`labels`	`in [string]`	`[]`	Accessible names for the thumbs, in `values` order. A multi-stop control is that many slider nodes, and the call site cannot reach inside to name them the way it names a `Slider`, so the names come in as a list — `["Minimum price", "Maximum price"]`. The group itself takes the call site's own `accessible-label:`.
`value-label`	`in string`	`@tr("Value")`	What a thumb this list does not name is called, with its position appended: "Value 1", "Value 2". A name nobody chose is still better than an unnamed control, which is one assistive technology cannot ask for.

Callbacks

Callback	Description
`changed(int, float)`	Fired with the thumb that moved and its new value. Read `values` for the whole set.

Accessibility

Multiple slider nodes. Each thumb is an independent slider accessible node reporting its individual value and the dynamic bounds imposed by its neighboring thumbs.
Accessible names. Thumb names are derived from the labels array or formatted via value-label.
Keyboard controls. Tab focuses each thumb sequentially. ←/↓ decreases value, →/↑ increases value, and Home/End jumps to the nearest boundary.