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:

3

Hi @JustinG,
thanks for this hint. That - however - seemingly only works with the default oh-slider element. The light control card at least won’t accept the disabled property:

blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: widget:winux_lightcard
                      config:
                        dimmeritem: PVHouseLoad
                        dimmermax: "10000"
                        disabled: true
                        enabled: false
                        icon: energy
                        itemname: House Load
                        sliderbgcolor: blue

Using / trying disabled as well as enabled here, but the slider is still moveable using the mouse or finger on touch devices. There are also no changes, when I use disabled or enabledonly.

In the meantime I abandoned that path and and now just display the numerical value in an oh-label-item.

4

No, it wouldn’t. You can’t just add arbitrary configurations to a custom widget. When you are configuring a custom widget like on a page like that, all of the config properties are passed to the widget’s props object. So, the only way that custom widget would be able to take advantage of a disabled property would be if somewhere in that widget there’s an expression that includes props.disabled. In order for that to specifically apply to the slider component of that widget, that expression would have to be in the slider’s disabled property.