You could take it one step further…
If you create an svg drawing and clip one of the filled objects you can do something like this
I created an svg file in inkscape by drawing a shape and duplicating it. One shape is gradient filled and the other shape just has stroke defined (no fill) as the outline. Then added a text object too.
In perspective designer, afer dropping the svg onto a view (embedded), I added the ‘style’ property to the svg’s gradient filled object (element[0]). Then added the value ‘clip-path’ to the style so I could bind the inset clipping to the scroll bar value. Bound it like this:
'inset('+toStr(100-{../Slider.props.value})+'% 0px 0px 0px)'
I bound the text value to the scroll value too.
Here’s my svg:
