Dimmer widget oh3 and UI design

Try playing with this code..

uid: LightWidget
tags: []
props:
  parameters:
    - description: title to display
      label: Title
      name: title
      required: false
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Dec 29, 2020, 5:05:47 PM
component: f7-card
config:
  class: lazy
  expandable: false
  style:
    border-radius: 6px
    height: 4em
    width: 17em
slots:
  default:
    - component: oh-icon
      config:
        icon: light
        height: 28
    - component: Label
      config:
        text: "=props.title !== NULL  ? props.title :'' "
        style:
          position: absolute
          left: 2rem
          top: 0.2rem
    - component: oh-button
      config:
        action: group
        actionGroupPopupItem: =(props.item)
        text: Color
        textColor: black
        bgColor: white        
        style:
          position: absolute
          right: 65px
          top: 5px
          width: 60px
          height: 25px
          border-radius: 12px
    - component: oh-toggle
      config:
        item: =(props.item)
        style:
          position: absolute
          right: 5px
          top: 5px
    - component: f7-block
      slots:
        default:
          - component: oh-slider
            config:
              scale: false
              item: =(props.item)