🔹 slider-entity-row - Add sliders to entities cards

How do you mean? Based on the state of a sensor or really trigger it from an automation? I am a noob myself, but if via automation then I would imagine you would need to create a sensor or input or something where you can write a state and this state can then trigger the slider dis-/appearing

Like for example:
image
I only want the sliders for my items to show if I click on either the electric or fan mode. If the BBQ is closed I want them hidden.

I managed to get this resolved using a conditional card.

I’d like to have a slider with a (self explaining) icon and no name, and the slider taking the space of the name. See the difference in this example.

1 Like

I managed to get this with some card-mod hackery. Not sure if this will work on all devices and browsers, but you could give it a try:

- type: entities
  title: "Custom Slider Entity Row"
  entities:
    - type: custom:slider-entity-row
      entity: <your-entity-here>
      card_mod:
        style:
          hui-generic-entity-row:
            $: |
              div.info.pointer.text-content {
                flex-grow: unset;
                flex-basis: 0px;
                margin-left: 0px;
                margin-right: 0px;
              }
          .: |
            hui-generic-entity-row div.wrapper ha-slider:not(.full) {
              max-width: unset;
            }
      hide_state: true
      name: []

1 Like

Could be a bit shorter - same as for a conventional slider:

type: entities
title: Slider-entity-row
entities:
  - type: custom:slider-entity-row
    entity: input_number.battery_level_check
    card_mod: &ref_style
      style:
        hui-generic-entity-row $: |
          .info {
            display: none;
          }
        .: |
          ha-slider {
            max-width: unset !important;
          }
  - entity: input_number.battery_level_check
    card_mod: *ref_style

Haven’t tested this solution for slider-entity-row on iOS.

P.S. Forgot to add a “hide_state: true” option.

Works like a charm! TY!

1 Like

No worries - though I would be inclined to use Ildar_Gabdullin’s more efficient code as he is more expert than me!

1 Like

Just in case - this solution must be tested in diff platforms.
Not using slider-entity-row myself.

I was able to achieve the same effect combining this with the stack-in card.

Does anyone know if it’s possible to use card-mod to style slider-entity-row in the style of mushroom-card sliders or my-slider-v2? As far as I can tell slider-entity-row is the only way to add a slider for RGBWW lights to control the warm white and cold white components, but I much prefer the styling of mushroom-card sliders.

1 Like

does not work for me :frowning:

Awesome​:heart_eyes::heart_eyes::heart_eyes::heart_eyes:

once every few months I come across this reply (when i’m trying to make a minimalistic designer slider, and every time I come across your answer it cracks me up. :joy:

Can you call a service with this (very nice) card?

Hello
Works like a charm for me.
Is there a possibility to set a dimmer slider as read-only : i would like to see the slider positionned with the entity value, but without possibility to change the slider position.
Thanks for your help :slight_smile:

I noticed I have an error indicating the deprecation of polymer. I see that the slider is based on webcomponents.org - Discuss & share web components
Will this no longer work in 2023.5?

you only need to take action when you see the deprecation warning in your Inspector window, because that shows when HA (through ay custom-card/resource) actually uses the Polymer.

I use the slider-entity-row, and No warning is logged. No worries :wink:

Does anyone know how to get rid of the value on the right???

Its sort of redundant for my usage and the padding is wrong. The padding I can probably fix with card-mod, but if i can remove it completely it would be my preference.

Use hide_state: true.
See the chart of available options here: