Custom Labels for progressBar

[SilverFang13]

Is your Feature Request Related to a Problem?

No response

Describe the Feature you'd Like

I would like to have a way to replace the labels used for the progressBar

Example of a possible syntax

'''meta-bind

INPUT[progressBar(

title(Battery), minValue(0, ":LiBatteryLow:"), maxValue(100, ":LiBatteryFull:"), stepSize(5)):2024-05-14#daily.stats.battery]

'''

Ability to produce something similar to the following image

^{*mock up created in photopea}

Additional Context

No response

[Cube707]

you can already accomplish this with CSS, if you have a font loaded which contains the icons or grab the SVG-data directly from lucide.

using the svg-data for a mask

.mb-input-type-progressBar.battery-charge {
    .mb-progress-bar-label-left,
    .mb-progress-bar-label-right {
        height: 1lh;
        overflow: hidden;
        &::before {
            content: '';
            width: 1lh;
            aspect-ratio: 1;
            display: block;
            background: var(--text-normal);
            mask-position: center;
            mask-size: contain;
            mask-repeat: no-repeat;
        }
    }
    .mb-progress-bar-label-left::before {
        mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWJhdHRlcnktbG93LWljb24gbHVjaWRlLWJhdHRlcnktbG93Ij48cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTAiIHg9IjIiIHk9IjciIHJ4PSIyIiByeT0iMiIvPjxsaW5lIHgxPSIyMiIgeDI9IjIyIiB5MT0iMTEiIHkyPSIxMyIvPjxsaW5lIHgxPSI2IiB4Mj0iNiIgeTE9IjExIiB5Mj0iMTMiLz48L3N2Zz4=");
    }
    .mb-progress-bar-label-right::before {
        mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWJhdHRlcnktZnVsbC1pY29uIGx1Y2lkZS1iYXR0ZXJ5LWZ1bGwiPjxyZWN0IHdpZHRoPSIxNiIgaGVpZ2h0PSIxMCIgeD0iMiIgeT0iNyIgcng9IjIiIHJ5PSIyIi8+PGxpbmUgeDE9IjIyIiB4Mj0iMjIiIHkxPSIxMSIgeTI9IjEzIi8+PGxpbmUgeDE9IjYiIHgyPSI2IiB5MT0iMTEiIHkyPSIxMyIvPjxsaW5lIHgxPSIxMCIgeDI9IjEwIiB5MT0iMTEiIHkyPSIxMyIvPjxsaW5lIHgxPSIxNCIgeDI9IjE0IiB5MT0iMTEiIHkyPSIxMyIvPjwvc3ZnPg==");
    }
}

Using that,

~~~meta-bind
INPUT[progressBar(title(Battery),class(battery-charge)):exampleProperty]
~~~

Renders to:

using a font

If you have a icons-font loaded, you could remove the mask stuff and instead set the content of the ::before to the respective UTF-8 code points for the icons.