How to include other cards to render inside my custom card's DOM?

I am doing some modifications to tv-card and i want to replace those buttons for volume control with a slider-card.

This is how it is right now:

And this is the wanted result:

I guess i can include the custom component as html tags, but how can i also pass the yaml config for the wanted card?

In my case, i want to include the slider card with this config:

entity: media_player.tv
height: 40px
mainSliderColor: white
secondarySliderColor: rgb(60, 60, 60)
thumbWidth: 0px
thumbHorizontalPadding: 0px

I thought maybe importing the slider-card from customCards or customElements and calling setConfig or something else just like HASS itself would do, but i have no clue at how to do it

Did you got this working? I’m trying to do the same.

Hey @luixal! Yes, i got it working!

I used the createCardElement function of the Helper Functions object got with window.loadCardHelpers()

The helpers functions are not well documented, but you can check my solution here:

Also, i got a few links for you:

1 Like

Thanks!

Looks great, I’ll try it out so I can get rid of looooooooooooooong yaml cards I reuse here and there :slight_smile:

1 Like