I made a slider to set a time for a fan to run, how can i clean this up?

[winged scaffold]

I made a countdown timer to control my fan. how do I clean this up and make it be contained on one card?

[hollow shale]

The quickest and easiest way would be to use the custom:stack-in-card. It allows [you] to group multiple cards into one card without the borders. Note: Don't use the one found in HACS by RomRider. That one is old and has not been updated in years. This fork has been updated recently. You'll have to add it as a custom repository.

Now, if you want to get a bit fancier, there's always the custom:button-card. There's a lot that you can do with this card though it may have a bit of a learning curve (and require a lot of experimenting) to get it to look the way you want. This is a screenshot of one of my cards. The bar at the bottom is a timer-bar-card. The countdown timer in the upper left is a card_modded Entities card. (I think it is the only card capable of showing a real-time countdown from a timer entity.) These cards were embedded via Custom Fields.

[topaz junco]

@winged scaffold can you please share how do you make a slider timer for this fan? I’d want to make one too

[winged scaffold]

hi rog889, I'm no expert but this is what I did:

i made number and timer helpers:

then I created automations based on when actions happen:

alias: MB Fan Timer Control
description: ""
triggers:
  - entity_id: input_number.mb_fan_time
    trigger: state
conditions: []
actions:
  - choose:
      - conditions:
          - condition: template
            value_template: "{{ states('input_number.mb_fan_time') | int != 0 }}"
        sequence:
          - data:
              duration: "{{ states('input_number.mb_fan_time') | int }}"
            target:
              entity_id: timer.mb_fan_timer
            action: timer.start
          - data:
              percentage: 25
            target:
              entity_id: fan.tasmota_2
            action: fan.set_percentage
      - conditions:
          - condition: template
            value_template: "{{ states('input_number.mb_fan_time') | int == 0 }}"
        sequence:
          - target:
              entity_id: timer.mb_fan_timer
            action: timer.cancel
            data: {}
          - target:
              entity_id: fan.tasmota_2
            action: fan.turn_off
            data: {}
mode: single

i made these visually but i'll share the yaml also in case that helps

alias: MB Fan Timer Finished
description: turn off fan
triggers:
  - trigger: state
    entity_id:
      - timer.mb_fan_timer
    to: idle
conditions: []
actions:
  - action: fan.turn_off
    metadata: {}
    data: {}
    target:
      device_id: a1158948b2bfe5251d27f8ec7b9b4307
mode: single

hope that helps

[winged scaffold]

wow that really looks fancy! well done

@topaz junco ps, the time on the slider in my example does not count down which is kind of unfortunate. I don't have a solution to that at this point

[topaz junco]

@winged scaffold Thank you for sharing

[hollow shale]

My automation concept is pretty much the same. The only thing I do differently is I use trigger_ids and a Choose action. This basically allows me to "group" related automations together. (This was before the UI was updated to have tags and filtering but I still like it this way.) You can see an example on my Github. https://github.com/dsellers1/home-assistant/tree/main/automations

[hollow shale]

The Entities card is the only one that can give you a real-time countdown. ```yaml
entities:

• entity: input_boolean.automation_auto_kitchen_lights
  name: "_"
  icon: none
  card_mod:
  style: |
  ha-card {
  background: none;
  border: none;
  padding: 0px 0 0 0
  }

I chose not to embed the slider into the card, but, instead went with more of a Settings-type approach. These are actually custom:button-cards with an embeded custom:slider-entity-row and Markdown card for the duration on the right. ```yaml
type: custom:slider-entity-row
entity: input_number.automation_auto_bathroom_lights_duration
hide_state: true
full_row: true

type: markdown
content: >
  {{-
  states.input_number.automation_auto_kitchen_lights_duration.state
  | int | string +" minutes"-}}
card_mod:
  style: |
    ha-card {
      border: none;
      background-color: transparent;
    }
```The `int` drops the decimal from the state and then `string` allows it to be concatenated with the *minutes*.