Add new Slider Button simillar to others like the Bullet

[Pereira98]

I'm not sure if this is already possible but I'm working on using a custom slider button with the same design as the bullet button for light brightness and cover position.

Here's the link for the Slider Button Card.

Here's a picture and code of my beta version;

Solid color is also possible instead of gradient.

I'm running into a problem aligning the text because of that one-liner, and I also believe the slider is not correctly positioned at the end, but mostly works for now.

Code:

/* Slider button classes for HACS Slider Button */
      ha-card.button-slider {
        text-transform: uppercase;
        --primary-text-color: black !important;
        --secondary-text-color: black !important;
        --action-icon-color-on: yellow !important;
        --action-icon-color-off: black !important;
        background: black !important;
        border-radius: 0px var(--ha-card-border-radius) var(--ha-card-border-radius) 0px !important;
        display: flex;
        align-items: center;
        padding-left: 0 !important; /* Remove default padding */
        position: relative; /* Ensure relative positioning for absolute children */
        min-height: 60px; /* Set a minimum height for the slider */
        height: 60px; /* Ensure a fixed height for consistency */
      }
      ha-card.button-slider div.icon {
        width: 41.6px; /* Adjust width to match the border-left width */
        height: 100%; /* Ensure it spans the full height of the container */
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--lcars-card-top-color);
        border-right: black solid 6px;
        box-sizing: border-box; /* Ensure padding is included in the element's total width and height */
        position: absolute;
        left: 0;
        top: 0;
      }
      
      ha-card.button-slider div.slider {
        flex: 1;
        display: flex;
        align-items: center;
        margin-left: 35px; /* Adjust margin to make room for the icon */
        border-radius: 0 var(--ha-card-border-radius) var(--ha-card-border-radius) 0;
        height: 100%; /* Ensure it spans the full height */
      }
      ha-card.button-slider div.slider .slider-bg {
        --slider-bg-color: var(--lcars-ui-tertiary); /* Adjust as needed */
        --slider-bg: linear-gradient(270deg, rgba(0, 0, 0, 0) +50%, var(--slider-color) 100%);
      }
      ha-card.button-slider div.text {
        text-align: right; /* Ensure text inside is right-aligned */
        font-size: 1.2rem; /* Adjust the font size to match LCARS style */
        color: var(--primary-text-color); /* Ensure text color matches the LCARS style */
        display: flex;
        align-items: right;
        justify-content: right;
        height: 100%; /* Ensure it spans the full height */
        line-height: 60px; /* Adjust line-height to vertically center the text */
      }

Card YAML:

type: custom:slider-button-card
entity: light.dimmer_switch_4_lightbulb
slider:
  direction: left-right
  background: gradient
  use_state_color: true
  use_percentage_bg_opacity: true
  show_track: true
  toggle_on_click: false
  force_square: false
  show_attribute: false
show_name: true
show_state: false
compact: true
icon:
  show: true
  use_state_color: true
  tap_action:
    action: toggle
  icon: mdi:light-recessed
action_button:
  mode: toggle
  icon: mdi:power
  show: false
  show_spinner: false
  tap_action:
    action: toggle
name: Escritório
attribute: brightness
show_attribute: false
card_mod:
  class: button-slider