Full_row but with icon

[enryf89]

Hello everyone, I'd like to have the possibility to have a full-width slider like when using the full_row: true option, but with the possibility to set an icon on the left.

Right now the only alternative I have found is using the options full_row: false name: ' ' but this leaves a gap between the icon and the slider.

thanks guys and keep up the good work. Enrico

[KTibow]

You can try the zero-width joiner: Go to here and press the copy button.

[david-kalbermatten]

Visual Example

I think that @enryf89 had something similar to this in mind. (Cobbled it together with paint.net :D).

type: entities
show_header_toggle: false
entities:
  - type: 'custom:slider-entity-row'
    attribute: brightness
    entity: light.rgbw_bed_light
    toggle: true
  - type: 'custom:slider-entity-row'
    attribute: white_value
    entity: light.rgbw_bed_light
    full_icon: 'mdi:white-balance-sunny' # idea for how to add icon to config
    full_row: true
    hide_state: false

Slider 1 is brightness, Slider 2 is white_value.

[enryf89]

Yes, exactly, @david-kalbermatten got it 100% right.

I'd like to have only the icon and the large slider.

thanks

[enryf89]

You can try the zero-width joiner: Go to here and press the copy button.

Thank you @KTibow for the suggestion, I tried that, but I have the empty space between the icon and the slider like this:

I'd prefer it like @david-kalbermatten mockup.

[david-kalbermatten]

@enryf89 Would you mind sharing the code for the color presets? Looks interesting :D

[enryf89]

here it is (only the colored buttons part):

entities:
  - colors:
      - color_name: white
        icon_color: 'linear-gradient(15deg,azure,white)'
        transition: 5
      - color_name: tomato
        icon_color: 'linear-gradient(15deg,red,tomato)'
        transition: 5
      - color_name: orange
        icon_color: 'linear-gradient(15deg,coral,orange)'
        transition: 5
      - color_name: gold
        icon_color: 'linear-gradient(15deg,gold,yellow)'
        transition: 5
      - color_name: green
        icon_color: 'linear-gradient(15deg,limegreen,yellowgreen)'
        transition: 5
      - color_name: royalblue
        icon_color: 'linear-gradient(15deg,mediumblue,royalblue)'
        transition: 5
      - color_name: darkmagenta
        icon_color: 'linear-gradient(15deg,darkmagenta,darkorchid)'
        transition: 5
    entity: light.led_salotto
    justify: around
    type: 'custom:rgb-light-card'

[ktownsend-personal]

I would also love this suggested feature. In my case, I'm trying to use this as an element on a picture elements card and the text is unnecessary. Just an icon and a slider side by side is all I need.

[VictorLamoine]

:+1: I would like that too

[KTibow]

Hit the :+1: button if you like it instead of leaving a comment.

[apivaral]

I also want to show icon but no name.

This control should support hide_name: true or show_name: false

[thomasloven]

I also want to show icon but no name.

This control should support hide_name: true or show_name: false

name: " "

[apivaral]

I also want to show icon but no name. This control should support hide_name: true or show_name: false

name: " "

It’s not the same, that leaves a large white space :(

[oscarb]

I managed to achieve this with the help of card_mod:

  head:
    entity: light.office_lights
    type: custom:slider-entity-row
    full_row: false
    hide_state: true
    style:
      hui-generic-entity-row$: |
        div.info.pointer.text-content {
          display: none;
        }
      hui-generic-entity-row: |
        div>ha-slider:not(.full) {
           max-width: none;
         }

Would still be nice to have it as part of the component and not having to rely on CSS to do this :)