[Example] [Slider] Continues Background Color Gradient

[MrBearPresident]

Color only updates after clicking.

_{Based on #800}

type: custom:bubble-card
card_type: button
button_type: slider
entity: input_number.help_house_testnumbe
show_state: true
styles: |-
  :host{
    --Percentage1: ${state>50 ? '0' : (50-state)/50};
    --Percentage2: ${state>50 ? (100-state)/50 : (state)/50};
    --Percentage3: ${state<50 ? '0' : (state-50)/50};
  }

  .bubble-range-fill:before{
    content: "" !important;
    height: 100% !important;
    width: 100% !important;
    position: absolute !important;
    background: rgba(41, 214, 255 , var(--Percentage1)) !important;
  }

  .bubble-range-fill{
    background: rgba(51, 204, 51,var(--Percentage2)) !important;
    opacity: 1;
  }

  .bubble-range-fill:after{
    content: "" !important;
    height: 100% !important;
    width: 100% !important;
    position: absolute !important;
    background: rgba(255,0,0,var(--Percentage3)) !important;
  }