Context: HA Newbie here.
I can’t seem to find another example of a card like this (the % should be like 80% - just a mock up):
The bar card seem to the way to go or can I make a tile card (the one I used to mock this up) and add a second row?
Is this a vertical stack with a bunch of CSS to wrap the stick to look like the tile?
Mushroom Cards definitely can create what you want.
Or you can stack a Tile card and a bar-card seamlessly.
A Mushroom Number card wouldn’t require a second card or a vertical-stack.
type: custom:mushroom-number-card
entity: input_number.number
primary_info: name
secondary_info: state
fill_container: false
display_mode: slider
icon: mdi:battery
icon_color: green
name: View Plus Battery
So questions - this reading is from sensor.view_plus_battery so I can’t seem to use this in the number card and the entity cards can’t show the slider.
Made a template helper to convert the sensor a number. Now I can add the number card but the slider then can change the number and the % is gone.
I am sure I have seen these mushroom cards around and this is what inspired me for this.
Did you add a unit of measurement when you created the helper?
Ok - progress - added that % to the template and used those links to get to this:
type: custom:mushroom-number-card
entity: number.airthings_view_battery
icon: mdi:battery
icon_color: green
display_mode: slider
fill_container: false
card_mod:
style:
mushroom-number-value-control$: |
mushroom-slider {
pointer-events: none;
cursor: default;
}
I think I want to make the slider height half so it’s clear it’s not a slider and a bar. Still working on this.
This will adjust the height
card_mod:
style:
mushroom-number-value-control$:
mushroom-slider$: |
.slider {
height: 20px !important;
}
Adjust the 20px to your liking…
Can you merge that CSS into my existing CSS? I am so behind on this new CSS lol
Let me know if this doesn’t do what you wanted…
card_mod:
style:
mushroom-number-value-control$:
mushroom-slider$: |
.slider {
height: 20px !important;
pointer-events: none;
cursor: default;
}
You can adjust the border-radius if you want a square bar
card_mod:
style:
mushroom-number-value-control$:
mushroom-slider$: |
.slider {
height: 20px !important;
pointer-events: none;
cursor: default;
border-radius: 0px !important;
}
Perfect 
Happy to help!!