Issue with Displaying Percentage on Slider in Horizontal Stack

[Dirk2.0 (Dirk)]

I would like to have the lamp icon(only that from the card) and the slider on the same line. The icon should be clickable and open the lamp’s properties when tapped.

How can I fix that?

The two ‘cards’

Like this. But in such a way that the slider is 80% of the card’s width, and the card with the lamp icon has the width of just the icon.

Only this icoon

[Dirk2.0 (Dirk)]

I’ve encountered an issue when using the input_number entity in a horizontal-stack configuration. When the entity is placed within the stack, the percentage value behind the slider does not show up.

Here’s the configuration I’m using:

type: horizontal-stack
cards:
  - type: entities
    entities:
      - entity: input_number.light_mood
        name: "Light Mood"

Problem:
When the slider is part of the horizontal stack, the percentage next to the slider is not displayed.
The issue is only present when using input_number inside a horizontal-stack. If the slider is outside the stack or in other configurations, it works as expected.

Has anyone experienced this or found a solution to make the percentage visible when using input_number within horizontal-stack cards?

Any help would be greatly appreciated!

In the browser

in the app

[LiQuid_cOOled]

A few questions

• Have you considered a Mushroom Number card?

• Do you have HACs and card_mod installed?

type: custom:mushroom-number-card
entity: input_number.number
primary_info: none
secondary_info: state
layout: horizontal
fill_container: false
display_mode: slider
icon: mdi:lightbulb
icon_color: blue

[Dirk2.0 (Dirk)]

With some HTML styles I had this result. When I click on the lamp itself I get all the lamp settings

type: horizontal-stack
cards:
  - type: entities
    entities:
      - type: custom:multiple-entity-row
        entity: light.tasmota
        name: ""
        show_state: true
        toggle: false
    show_header_toggle: false
    state_color: true
    card_mod:
      style: |
        ha-card {
          height: 25px;
          width: 200px;
          background-color: transparent;
          border-top: 1px;
          border-bottom: 1px ;
          border-left: 1px;
          border-right: 1px;
          border-radius: 1px;
          box-shadow: none;
          left: "-14%";
          font-size: 0px;
          justify-self: left;
          padding left: 10px;
          margin: -20px -10px 0px -10px
        }

type: horizontal-stack
cards:
  - type: entities
    entities:
      - type: custom:slider-entity-row
        entity: input_number.light_mood
        full_row: true
        show_state: true
        show_percentage: true
    card_mod:
      show_name: false
      style: |
        ha-card {
          background: none;
          margin: 7px 30px 0px 65px ;
          box-shadow: none;
          border: none;
          border-radius: 0px;
          height: 10px;
        }
        .card-content {
          padding: 0px;
          margin: -25px;
        }
        hui-slider {
          height: 20px;
        }
        .entity {
          height: 20px;
        }