Skip to content

declarative::Slider#

Slider control.

Header:#include <AUI/View/ASlider.h>
CMake:aui_link(my_target PUBLIC aui::views)

Detailed Description#

The Slider represents a horizontal slider control that can be used in declarative UI definitions. It exposes a single value in the range [0, 1] and emits a signal whenever the value changes. The visual representation consists of a track and a handle view. By default the track and handle are created using the static helper functions defaultTrack() and defaultHandle(), but users may provide custom implementations by overriding the corresponding member variables.

The slider automatically handles mouse and keyboard input. When the user drags the handle, the onValueChanged slot is invoked.

Examples#

examples/7guis/timer/src/main.cpp

7GUIs Timer - Timer example. 

            } AUI_WITH_STYLE { LayoutSpacing { 4_dp } },
            Label { AUI_REACT("{:.1f}s"_format(duration_cast<milliseconds>(*mElapsedTime).count() / 1000.f)) },
            Horizontal {
              Label { "Duration:" },
              Slider {
                .value = AUI_REACT(float(mDuration->count()) / float(MAX_DURATION.count())),
                .onValueChanged =
                    [this](aui::float_within_0_1 newValue) {
                        mDuration =
                            high_resolution_clock::duration(long(float(MAX_DURATION.count()) * float(newValue)));

examples/7guis/circle_drawer/src/main.cpp

7GUIs Circle Drawer - Undo, redo, dialog control. 

                      auto radiusPopup = _new<AWindow>(
                          "", 200_dp, 50_dp, dynamic_cast<AWindow*>(AWindow::current()), WindowStyle::MODAL);
                      radiusPopup->setContents(Vertical {
                        Label { "Adjust diameter of circle at {}."_format(circle->position) },
                        Slider {
                          .value = AUI_REACT(circle->radius / MAX_RADIUS),
                          .onValueChanged =
                              [this, circle](aui::float_within_0_1 s) {
                                  circle->radius = s * MAX_RADIUS;
                                  mState->circles.notify();

Public fields and Signals#

handle#

_<AView> handle

View representing the slider handle.

The default implementation is provided by defaultHandle().

onValueChanged#

contract::Slot<aui::float_within_0_1> onValueChanged

Slot that is called whenever the slider value changes.

The slot receives the new value as a float_within_0_1. The implementation expects the consumer to update the value contract inside this slot.

track#

_<AView> track

View representing the slider track.

By default this is created by defaultTrack(value) which creates a simple rectangular track. Users can replace this with a custom view to change the appearance.

value#

contract::In<aui::float_within_0_1> value

Current slider value in the range [0, 1].

The value is a contract input, meaning it can be bound to other components or data models. Changing this value programmatically will update the handle position.

Examples#

examples/7guis/cells/tests/FormulaTests.cpp

7GUIs Cells - Spreadsheet processor (Excel).

TEST_F(Cells_Formula, ChangePropagation) {
    mSpreadsheet[{1, 0}].expression = "=A0+1";

    mSpreadsheet[{0, 0}].expression = "228";
    EXPECT_EQ(std::get<double>(mSpreadsheet[{1, 0}].value.value()), 229);

    mSpreadsheet[{0, 0}].expression = "0";
    EXPECT_EQ(std::get<double>(mSpreadsheet[{1, 0}].value.value()), 1);
}
examples/7guis/temperature_converter/src/main.cpp

7GUIs Temperature Converter - Fahrenheit to Celsius and vice versa.

    TemperatureConverterWindow() : AWindow("AUI - 7GUIs - TempConv", 300_dp, 50_dp) {
        setContents(Centered {
          Horizontal {
            myPicker() AUI_LET {
                biConnect(it->value(), mCelsius);
                it->focus();
            },
            Label { "°C" },
            Label { "=" } AUI_WITH_STYLE { Margin { {}, 16_dp } },
            myPicker() AUI_LET { biConnect(it->value(), mFahrenheit); },

Public Methods#

defaultHandle#

static _<AView> Slider::defaultHandle()

Creates a default handle view.

Returns
A view representing the handle.

The handle is a draggable element that the user can move along the track. It updates the value contract when dragged.

1
2
3
4
5
6
7
_<AView> Slider::defaultHandle() {
    return _new<AView>() AUI_WITH_STYLE {
        BackgroundSolid { AStylesheet::getOsThemeColor() },
        FixedSize { 8_dp },
        BorderRadius { 4_dp },
    };
}

defaultTrack#

static _<AView> Slider::defaultTrack(const contract::In<aui::float_within_0_1>& value)

Creates a default track view.

Arguments
value
The slider value contract.
Returns
A view representing the track.

The returned view is a simple rectangle that visually represents the slider's range. It listens to the value contract to update its visual state.

1
2
3
4
5
6
_<AView> Slider::defaultTrack(const contract::In<aui::float_within_0_1>& value) {
    return ProgressBar { .progress = value } AUI_WITH_STYLE {
        FixedSize { {}, 4_dp },
        MinSize { 150_dp, {} },
    };
}