How to set a oh-slider to read-only

Setup, Configuration and Use Widgets
1

Hi all,

I want to visualize e.g. the state of charge of a PV battery, an electric load or anything that I know the max and min values for. The gauge-widget technically allows that, but I was looking for some sort of a horizontal slider where the widget shows description/title, state (in numbers and unit, e.g. 55%) as well as a graphic representation of the state.
The UI marketplace has the Light Control Card which to the most part does what I want:

Bildschirmfoto 2025-05-04 um 22.02.04
Bildschirmfoto 2025-05-04 um 22.02.041750×236 13.6 KB

[Fig. 1: representation of 731 W / 10.000 W as blue slider]

However, it uses the oh-slider widget which does allow for changing the value using the mouse: grab the current position and drag along.
That’s perfectly fine for what it was intended for: as an interface for a dimmer
In my use case however I would just like to use this (or a similar widget) as a display-only widget.

How can I make this a widget that cannot be manipulated by dragging it with the mouse?

Am I looking at the wrong widget type in the first place?

Thanks

Marco

P.S.: running OH 4.3.3 if that matters

2

The oh-slider is based on the f7-range component:

You can see in the docs that the range accepts a disabled property so adding disabled: true to the slider stops interactions.

There are, also, many other ways to do this depending on how much customization you want. I would probably just use a basic div component with a variable width. SVGs would be another good way to go as in this widget: