Home Assistant - Fan Slider Render

Question

The code below is a card in HACS that render switches based on entity used. The code allows for any entity that is light.(entity_name) to render as a sliding range switch, and any entity that is switch.(entity_name) to be rendered as an on/off switch. I have a fan.(entity_name) with variable speed, but when I use this entity, it defaults as an on off switch. What can I add to this code for fan.(entity_name) to be rendered as a sliding range switch? See below example of rendered switches.

Thanks!

      <div class="main">
        ${this.config.entities.map(ent => {
            entityCounter++;
            var switchValue = 0;
            const stateObj = this.hass.states[ent.entity];
            switch(stateObj.state) {
                case 'on':
                    switchValue = 1;
                    break;
                case 'off':
                    switchValue = 0;
                    break;
                default:
                    switchValue = 0;
            }
            return stateObj ? html`
                <div class="light">
                  <div class="light-slider">
                    <h2>${ent.name || stateObj.attributes.friendly_name}</h2>
                    ${stateObj.attributes.supported_features > 9 ? html`
                        <h4 class="brightness">${stateObj.state === "off" ? 0 : Math.round(stateObj.attributes.brightness/2.55)}</h4>
                        <div class="range-holder" style="--slider-height: ${brightnessHeight};">
                          <input type="range" class="${stateObj.state}" style="--slider-width: ${brightnessWidth};--slider-height: ${brightnessHeight};" .value="${stateObj.state === "off" ? 0 : Math.round(stateObj.attributes.brightness/2.55)}" @change=${e => this._setBrightness(stateObj, e.target.value)}>
                        </div>
                    ` : html`
                        <h4>${stateObj.state}</h4>
                        <div class="switch-holder" style="--switch-height: ${switchHeight}">
                          <input type="range" class="${stateObj.state}" style="--switch-width: ${switchWidth};--switch-height: ${switchHeight};" value="0" min="0" max="1" .value="${switchValue}" @change=${e => this._switch(stateObj)}>
                        </div>
                    `}
                  </div>
                  <div class="toggle">
                    <input ?checked=${stateObj.state == "on"} type="checkbox" id='toggle${entityCounter}' class='toggle-btn' @change=${e => this._switch(stateObj)} />
                    <label for='toggle${entityCounter}'><span></span></label>
                  </div>  
                </div>
            `: html``;
        })}
        </div>
      </div>
    </div>
`;

}

Answer 1

The code for switching between a range-slider or on-off toggle is:

${stateObj.attributes.supported_features > 9 ? html`1` : html`2` }

for lights, the 9 flag means,

• SUPPORT_FLASH
• SUPPORT_BRIGHTNESS

you can find more about that in the code.

For a Fan entity, the check on > 9 doesn't really make sense. Also, i'm not sure if just rendering the fan with the light-slider html would actually be able to set the fan speed.
There's a @change=${e => this._setBrightness(stateObj, e.target.value)} that might have to be different when trying to set a fan speed.

If the same code for setting the brightness also works for setting a fan speed, you could try something like:

${stateObj.domain == "fan" || stateObj.attributes.supported_features > 9 ? html`htmlForSlider` : html`htmlForToggle` 

domain should contain the entity class