Can't use slider in my expandable widget

Hello all,

I have a card widget which is expndable with a slider at the top but i can’t use it. If I cklick on the slider it will expand but i want to use the slide where is my error

uid: Cell_ColorLight_Card_1
tags: []
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: false
      type: TEXT
    - description: Header big sized
      label: Header
      name: header
      required: false
      type: TEXT
    - description: Icon on top of the card (only f7 icons (without f7:))
      label: Icon
      name: icon
      required: false
      type: TEXT
    - description: rgba or HEX
      label: Background Color
      name: bgcolor
      required: false
      type: TEXT
    - context: item
      description: Item to control on/off
      label: Item
      name: item_schalter
      required: false
      type: TEXT
    - context: item
      description: Item to control brightness
      label: Item
      name: item_brightness
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Apr 24, 2024, 8:29:14 AM
component: f7-card
config:
  expandable: true
  style:
    --f7-card-expandable-tablet-height: 75vh
    --f7-card-expandable-tablet-width: 35vw
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    height: 150px
    margin-left: 5px
    margin-right: 5px
    margin-top: 10px
    noShadow: false
    padding: 0px
  swipeToClose: true
slots:
  default:
    - component: oh-button
      config:
        class:
          - cell-open-button
          - card-opened-fade-out
        color: black
        iconF7: expand
        iconSize: 30px
        style:
          padding-bottom: 35px
          padding-top: 10px
          position: absolute
          right: 0
          top: 0
          z-index: 0
    - component: f7-card-content
      config:
        style:
          width: 100%
      slots:
        default:
          - component: oh-button
            config:
              class:
                - card-opened-fade-in
                - cell-close-button
                - card-close
              color: black
              iconF7: xmark_circle_fill
              iconSize: 30px
              style:
                padding-bottom: 35px
                padding-top: 10px
                position: absolute
                right: 0
                top: 0
                z-index: 999
          - component: f7-block
            config:
              class:
                - no-padding
              style:
                height: 150px
                margin: 0px
                background: none
            slots:
              default:
                - component: f7-row
                  config:
                    bgcolor: green
                    style:
                      height: 30px
                  slots:
                    default:
                      - component: Label
                        config:
                          style:
                            font-size: 25px
                            font-weight: 600
                          text: steckdose
                      - component: oh-slider
                        config:
                          item: =props.item_brightness
                          max: 100
                          min: 0
                          style:
                            --f7-range-bar-border-radius: 8px
                            --f7-range-bar-size: 8px
                            --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
                            --f7-range-knob-size: 20px
                            bottom: 0px
                            left: 0px
                            position: relative
                            width: calc(100% - 40px)
                            z-index: 999
                      - component: oh-toggle
                        config:
                          item: =props.item_schalter
                          style:
                            position: absolute
                            right: 2em
                            top: 15px
          - component: f7-block
            config:
              class:
                - card-prevent-open
                - card-content-padding
              outline: false
            slots:
              default:
                - component: f7-list
                  config: {}
                  slots:
                    default:
                      - component: oh-toggle-item
                        config:
                          color: green
                          icon: oh:poweroutlet
                          item: =props.itemSwitch
                          title: Steckdose
                      - component: oh-label-item
                        config:
                          color: blue
                          icon: f7:chart_bar_circle
                          item: =props.itemDailyTotalPower
                          title: Daily Total Power
                      - component: oh-label-item
                        config:
                          color: blue
                          icon: f7:chart_bar
                          item: =props.itemActualPower
                          title: Actual Power
                      - component: oh-label-item
                        config:
                          color: blue
                          icon: f7:chart_bar_square_fill
                          item: =props.itemTotalePower
                          title: Totale Power
                - component: oh-webframe-card
                  config:
                    borders: false
                    class:
                      - display-block
                    height: 240px
                    noBorder: false
                    noShadow: true
                    src: =props.URL.replace('{period}', vars.selectedPeriod ||
                      [props.timerange.split(',')[0].split(';')[0]])
                - component: f7-segmented
                  config:
                    class:
                      - padding-bottom-half
                    outline: false
                    round: false
                    style:
                      --f7-button-border-radius: 4px
                      --f7-button-font-size: 14px
                      --f7-button-font-weight: 300
                      --f7-button-outline-border-width: 1px
                      --f7-button-padding-horizontal: 0px
                      --f7-button-padding-vertical: 0px
                      --f7-button-text-color: "=themeOptions.dark === 'light' ? 'black' : 'white'"
                      --f7-button-text-transform: none
                      margin-left: 10px
                      margin-right: 10px
                      margin-top: 250px
                  slots:
                    default:
                      - component: oh-repeater
                        config:
                          for: size
                          fragment: true
                          sourceType: range
                        slots:
                          default:
                            - component: oh-repeater
                              config:
                                for: period
                                fragment: true
                                in: =[props.timerange.split(",")[loop.size].split(";")[1]]
                              slots:
                                default:
                                  - component: oh-button
                                    config:
                                      action: variable
                                      actionVariable: selectedPeriod
                                      actionVariableValue: =props.timerange.split(",")[loop.size].split(";")[0]
                                      fill: "=(([props.timerange.split(',')[loop.size].split(';')[0]] ==
                                        vars.selectedPeriod) ||
                                        (props.timerange.split(',')[0].split(';\
                                        ')[1] === loop.period) &&
                                        !vars.selectedPeriod) ? true : false"
                                      outline: true
                                      round: false
                                      style:
                                        --f7-button-border-color: var(--f7-card-outline-border-color)
                                      text: =loop.period

Setting card expandable to true causes the f7-card to get the card-expandable css class. That css class when applied to the card content sets the css pointer-events property to none and that property cascades down to all the child elements of the card.

You could override this with a stylesheet and set the slider’s pointer-events back to auto. You could then click on the slider again, but you would find that every time you clicked on the slider it would change the slider AND open the card (which I suspect you would find annoying). Without any javascript way of altering how the click event “bubbles” through the element tree, you can’t really have your cake and eat it too here. If you really must have this behavior then you’re going to have to find some workaround such as opening the card by the use of buttons and just overlay buttons above and below the slider, or something equally complicated.

@JustinG Okay thanks for the feedback…is there some other way to achieve the same thing like an oh-card popup or sth. else?

I, personally, tend to avoid trying to pack too many clickable areas into a space like this. It just doesn’t work with my clumsy, chunky fingers. So for me it’s a better UX to just move the slider to the expandable part of the card content even if it means there’s one additional click to get to it. That’s not a big cost to pay to avoid the frustration of opening the card when I mean to change the slider or changing the slider when I want to open the card.

In the end you just have to decide how you want to divide up the click targets. If I were to do this, I’d probably just use the oh-slider-cell where the ability to open the card has been restricted to the corner button so that there is no overlap (or even much adjacency) between the click areas.

What is than the best to do…

I want a widget where i can switch on and dim my hue bulb but if i want to change the color or scene I want to popup and have a more detailed view

Again, I think I would start with a basic oh-cell. You can configure that so that clicking on the cell toggles the switch item. You can add a slider to the background slot of the cell (of course, you’ll want the classes that fade out the slider when the cell is open), and the additional components to the default slot.

By addition both the toggle option and components to the default slot, the cell will automatically add the dot menu button in the upper right-hand corner which will then be the way you open the card and see the additional controls.

The only downside to this that you will see the cell “push” each time you work the slider. The cell won’t actually be activating its toggle action, but it will look like you’re clicking on it. If this bothers you, then you just have to add one more layer and start the widget with a div that has the no-active-state class and put the cell inside that div.