How can i make a slider cell within a widget more compact?

[ralfonat (RO)]

Hi there,

I made a couple of widgets for my Overview page. I am struggling with my Dachfenster (skylights) widget. I have a vertical slider to adjust the number of minutes it stays open and it looks very bulky. I want to have a minimal size just like my arrow icons/buttons. I tried various height and max-height settings, but i cant seem to influence the resulting html (350px height):

Here is the widget code:

uid: dachfensterWidget
tags: []
props:
  parameters:
    - description: Raum des Dachfensters
      label: Raum
      name: raum
      required: true
      type: TEXT
    - context: item
      description: Item des Dachfensters
      label: Item Dachfenster
      name: itemDF
      required: true
      type: TEXT
    - context: item
      description: Item des Dachfensters-Auto
      label: Item Dachfenster Auto
      name: itemDFAuto
      required: true
      type: TEXT
    - context: item
      description: Item des Dachfensters-Auto Timer
      label: Item Dachfenster Auto Timer
      name: itemDFAutoTimer
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Jun 7, 2026, 10:23:35 PM
component: f7-card
config:
  title: ="Dachfenster " + props.raum
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            config:
              class:
                - align-items-center
                - display-flex
                - justify-content-space-between
                - align-content-stretch
            slots:
              default:
                - component: f7-col
                  config: {}
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: command
                          actionCommand: ON
                          actionCommandAlt: OFF
                          actionFeedback: Dachfenster auf
                          actionItem: =(props.itemDF)
                          large: true
                          style:
                            align-items: center
                            min-width: 36px
                            text-align: center
                            text-overflow: clip
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                f7: arrow_up
                                size: 36
                - component: f7-col
                  config: {}
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: toggle
                          actionCommand: ON
                          actionCommandAlt: OFF
                          actionFeedback: Dachfenster Auto toggled
                          actionItem: =(props.itemDFAuto)
                          fill: =items[props.itemDFAuto].state === "ON"
                          item: =(props.itemDFAuto)
                          large: true
                          raised: =items[props.itemDFAuto].state === "ON"
                          stateAsHeader: true
                          style:
                            align-items: center
                            min-width: 36px
                            text-align: center
                            text-overflow: clip
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                f7: arrow_right_arrow_left
                                size: 36
          - component: f7-row
            config:
              class:
                - align-items-center
                - display-flex
                - justify-content-space-between
                - align-content-stretch
            slots:
              default:
                - component: f7-col
                  config: {}
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: command
                          actionCommand: OFF
                          actionCommandAlt: OFF
                          actionFeedback: Dachfenster zu
                          actionItem: =(props.itemDF)
                          large: true
                          style:
                            align-items: center
                            min-width: 36px
                            text-align: center
                            text-overflow: clip
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                f7: arrow_down
                                size: 36
                - component: f7-col
                  config: {}
                  slots:
                    default:
                      - component: oh-slider-cell
                        config:
                          item: =(props.itemDFAutoTimer)
                          label: true
                          max: 720
                          min: 0
                          releaseOnly: true
                          scale: true
                          scaleSteps: 60
                          step: 5
                          style:
                            align-items: center
                            min-width: 36px
                            text-align: center
                            text-overflow: clip
                          subtitle: =items[props.itemDFAutoTimer].state + " min"

[ralfonat (RO)]

as a follow up, am I doing this right? or would that all be easier in openhab-panel? (i have never used it)

[JustinG]

The main issue here is that you are trying to use the oh-slider-cell. The cells are pre-styled containers that are very difficult to override and work with. They are really intended as the most “low code” option of just add it to a page and don’t worry about it. If you really want the look of the extra container you can try to use an oh-slider-card instead which gives you many more options for styling the card container itself, but the best choice is just to use the oh-slider directly. This will match the style of your buttons more closely.

Whichever option you choose, styling the slider itself is a little tricky. This is actually covered explicitly in the advanced widget tutorial where a vertical slider it fit into place in a larger widget:

How To Build An Advanced Custom Widget

In the previous widget building tutorial, I made a custom widget for my two new matter connected air filters. Well, they work well enough that I just got another one. Let’s put all three on one widget! This is the second in a series of planned tutorials walking through many aspects of widget creation. This tutorial is going to be a deeper dive into some of the more technical aspects of widgets, so I’m going to assume that anyone reading this tutorial is already familiar with widget basics. If y…

[ralfonat (RO)]

thanks for your reply. I guess what I really want is just the value in a minimally/compact cell, and clicking the cell making the slider pop up. What is the easiest way to get that?

[JustinG]

@ralfonat

What is the easiest way to get that?

Easy is, of course, not the same for everyone. But, probably the shortest configuration that will accomplish this without extra problems is:

- component: oh-link
  config:
    text: Value
    popoverOpen: '#sliderPop'
- component: f7-popover
  config:
    id: sliderPop
    style:
      padding: 10px
      height: min-content
  slots:
    default:
      - component: oh-slider
        config:
          item: testNumber

At issue is the fact that the cell components in particular already have a lot of css styles applied to them. They are not really meant to be altered but are instead intended to be a low code as possible for a basic grid of cells layout. Cards are slightly more general (that is, they have less css already applied to them and are designed to allow you to easily apply css to their various regions). But they also still come with the “card” visual outline. If you really want an second outline within your main card outline then you can use a card, but that will still take more effort to get the specific effect you want.

[ralfonat (RO)]

thank you so much for your help. I have tried incorporating the changes but now the slider seems cut off and won’t accept my config (scale, description, vertical, etc…)

after click:

code:

          - component: f7-row
            config:
              class:
                - align-items-center
                - display-flex
                - justify-content-space-between
                - align-content-stretch
            slots:
              default:
                - component: oh-link
                  config:
                    text: =items[props.itemDFAutoTimer].state + " min"
                    popoverOpen: "#sliderPop"
                - component: f7-popover
                  config:
                    id: sliderPop
                    style:
                      padding: 10px
                  slots:
                    default:
                      - component: oh-slider
                        config:
                          item: =(props.itemDFAutoTimer)
                          min: 0
                          max: 100
                          step: 1
                          vertical: true
                          verticalReversed: false
                          scale: true
                          scaleSteps: 5
                          scaleSubSteps: 4
                          label: true
                          releaseOnly: false

[JustinG]

@ralfonat

the slider seems cut off and won’t accept my config (scale, description, vertical, etc…)

The slider is configured exactly as you have set it. But you’ve run into a common css issue: your slider is 0 pixels tall.

When you set the slider to vertical, its height value is set to 100%. Because of the way that the F7 library does it’s modals like the popover, they don’t have a height value that the slider can be 100% of. 100% of “I don’t know how tall I am” gets you 0 pixels. So, if you want the vertical slider you will have to add some extra style to the oh-slider that sets its size a little more manually.

style:
  height: 300px
  width: 100%
  margin-top: 10px
  margin-bottom: 10px

should be sufficient, or at least close.

[ralfonat (RO)]

it seems almost like wizardry to me that you are so fluent in this. Again thank you very much for your help. To give something back to the thread here is my final config and how it looks:

version: 1
widgets:
  skylightWidget:
    tags: []
    props:
      parameters:
        - description: room of the skylights
          label: room
          name: room
          required: true
          type: TEXT
        - context: item
          description: item of the skylights
          label: Item skylight
          name: itemSL
          required: true
          type: TEXT
        - context: item
          description: item of the skylights-Auto
          label: Item skylight Auto
          name: itemSLAuto
          required: true
          type: TEXT
        - context: item
          description: item of the skylights-Auto Timer
          label: Item skylight Auto Timer
          name: itemSLAutoTimer
          required: true
          type: TEXT
      parameterGroups: []
    component: f7-card
    config:
      title: ="skylight " + props.room
    slots:
      default:
        - component: f7-card-content
          slots:
            default:
              - component: f7-row
                config:
                  class:
                    - align-items-center
                    - display-flex
                    - justify-content-space-between
                    - align-content-stretch
                slots:
                  default:
                    - component: f7-col
                      config: {}
                      slots:
                        default:
                          - component: oh-button
                            config:
                              action: command
                              actionCommand: ON
                              actionCommandAlt: OFF
                              actionFeedback: skylight auf
                              actionItem: =(props.itemSL)
                              large: true
                              style:
                                align-items: center
                                min-width: 36px
                                text-align: center
                                text-overflow: clip
                            slots:
                              default:
                                - component: f7-icon
                                  config:
                                    f7: arrow_up
                                    size: 36
                    - component: f7-col
                      config: {}
                      slots:
                        default:
                          - component: oh-button
                            config:
                              action: toggle
                              actionCommand: ON
                              actionCommandAlt: OFF
                              actionFeedback: skylight Auto toggled
                              actionItem: =(props.itemSLAuto)
                              fill: =items[props.itemSLAuto].state === "ON"
                              item: =(props.itemSLAuto)
                              large: true
                              raised: =items[props.itemSLAuto].state === "ON"
                              stateAsHeader: true
                              style:
                                align-items: center
                                min-width: 36px
                                text-align: center
                                text-overflow: clip
                            slots:
                              default:
                                - component: f7-icon
                                  config:
                                    f7: arrow_right_arrow_left
                                    size: 36
              - component: f7-row
                config:
                  class:
                    - align-items-center
                    - display-flex
                    - justify-content-space-between
                    - align-content-stretch
                slots:
                  default:
                    - component: f7-col
                      config: {}
                      slots:
                        default:
                          - component: oh-button
                            config:
                              action: command
                              actionCommand: OFF
                              actionCommandAlt: OFF
                              actionFeedback: skylight zu
                              actionItem: =(props.itemSL)
                              large: true
                              style:
                                align-items: center
                                min-width: 36px
                                text-align: center
                                text-overflow: clip
                            slots:
                              default:
                                - component: f7-icon
                                  config:
                                    f7: arrow_down
                                    size: 36
                    - component: f7-col
                      config: {}
                      slots:
                        default:
                          - component: oh-link
                            config:
                              popoverOpen: ="#sliderPop" + props.itemSLAutoTimer
                              style:
                                align-items: center
                                display: flex
                                text-align: center
                              text: =items[props.itemSLAutoTimer].state + " min"
                          - component: f7-popover
                            config:
                              id: ="sliderPop" + props.itemSLAutoTimer
                              style:
                                padding: 10px
                            slots:
                              default:
                                - component: oh-slider
                                  config:
                                    item: =(props.itemSLAutoTimer)
                                    label: true
                                    max: 720
                                    min: 0
                                    releaseOnly: true
                                    scale: true
                                    scaleSteps: 20
                                    step: 5
                                    style:
                                      height: 250px
                                      margin-bottom: 10px
                                      margin-top: 10px
                                      width: 100%
                                    vertical: true