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

I did that, but I still get the position when sliding

  - type: custom:slider-entity-row
    entity: input_select.offset_sfeer_morgen
    hide_state: true

  name: ''
    - '-60'
    - '-55'
    - '-50'
    - '-45'
    - '-40'
    - '-35'
    - '-30'
    - '-25'
    - '-20'
    - '-15'
    - '-10'
    - '-5'
    - '0'
    - '5'
    - '10'
    - '15'
    - '20'
    - '25'
    - '30'
    - '35'
    - '40'
    - '45'
    - '50'
    - '55'
    - '60'

This works fine, even without mentioning hide_state :

  - entity: input_number.basisvolume_pioneer_receiver
    name: Basisvolume Pioneer

Running last version : Home Assistant 2021.12.9

I don’t think the options should make a difference, but my input_selects are all sets of strings, not numbers.
Here’s a complete test card I threw together just now:

type: entities
  - entity: input_select.harmony_activity
    type: custom:slider-entity-row
    hide_state: false
  - entity: input_select.light_fade_out_picker
    type: custom:slider-entity-row
    hide_state: true
  - entity: input_select.google_homes
    type: custom:slider-entity-row

And the result:


is it possible to use an input_boolean to hide a slider of type custom:slider-entity-row?
I am using this control not for lights, but for a fan, and I need the input_boolean to toggle the manual control of the fan. And only if input_boolean is on, then I want to show the slider.

I have it not set up with conditional cards, but it’s messy, since I have 4 cards now.

Use card_mod to hide a slider conditionally.

Hi, you mean by setting the visibility of the slider to hidden based on a variable?

Do you have an example of how this could work?

I do not have an example for this slider-entity-row.
But there are a lot of examples here, you may find a code for hiding an element or the whole row.
Probably it should be based on using a “display: none” CSS property.

Sorry for the late reaction ! Do you get the activity of your harmony or the position number when sliding ?

I created a new one to test, but still the position number when sliding…

type: entities
  - type: custom:slider-entity-row
    entity: climate.airco_gang
    name: temperatuur airco gang
    icon: mdi:thermometer
  - type: custom:slider-entity-row
    entity: input_select.select_fanspeed_test
    name: windkracht

Schermafbeelding 2022-01-22 144407

Already answered:

Probably… Or by direct changing of the “paper-progress” code.

Huh…you’re right, the slider pin shows a position number, not the text of the option. I found this closed issue on the slider-entity-row github page.

Apparently, it’s a limitation of the paper-slider element the card is built on. :frowning:

Is there a way to trigger another action when the slider position has been used to change the position? I have in mind something similar to “multi_calls:” under tap_action of custom:button-card?

For example, I want to turn off one of the automation (the one that drives the shutters up and down automatically) as soon as the user changes the position using the slider. Another automation that would trigger when position changes is clearly not an option since the position can also be changed by another automation and not strictly manually by the user.

after more than 1 year of happiness with slider-entity-row, I got a strange issue after this month HA update.
On my client Mac computer everything continue to work fine (HA is on Rpi 4+ssd), but on my android phone I got an alert "custom element doesn’t exist: slider-entity-row " for all my 5 roller shutters.
I don’t know where to start to the diagnostic … phone-HA server ???

help please !!!

EDIT: it was an HACS issue, old version, delete manually HACS (it was too old to update), then reinstall it. (Bienu shelly script and slider-entity-row was preserved), then update slider-entity-row to latest version.

it seem it was still working on the Mac before until the cache was cleared.

I was using the slider-entity-row to add a slider for my ceiling fans. Today I noticed they were all gone and found this issue:

Anyone know if this will be fixed or when?

Hello everyone,
I am trouble positioning a slider vertically.

I can either get it vertically-aligned to the middle but lose the scaling of the slider (i.e. the slider stays the same size even if the card gets scaled):

              .card-content {
                margin: 0;
                position: absolute;    #seems to be the key to the problem
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);

or I can get the slider to scale properly but then the slider is no longer vertically centered

              .card-content {
                margin: 0;
                position: relative;         #seems to be the key to the problem
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);

Can somebody help me, please? :relaxed:

Can I enable/disable the slider via automation? If so, what would be the code?

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:
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"
    - type: custom:slider-entity-row
      entity: <your-entity-here>
            $: |
              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
  - type: custom:slider-entity-row
    entity: input_number.battery_level_check
    card_mod: &ref_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.