[FR] Live Preview for bubble-card slider position.

[yeegg00]

I just discovered this and was trying to figure out how to display a live preview of number for an input number helper. The slider from HA allow us to preview the number when sliding which makes it easy to know should we want to specifically set the fan speed to 7 for example. Maybe this feature already exist but I could not find any mention of this.

This "Live preview" is essentially the position of the slider instead of the attribute of the entity/helper. The idea is that we would be able to know at which number or percentage we desire before letting go of sliding the slider.

I know that there is the live update toggle under the button setting, however I would like to just preview the number/percentage before letting go of the slider. Take for instance a curtain slider, if i want to set the curtain to specifically 78%, with live update, i have to slowly slide the slider until it stops at 78%. Without live update, I have to eyeball it to around 78%. If there is any option for just live preview, that would be awesome.

Currently, I'm using mushroom card slider and their default secondary information have this live preview behavior but for mobile UI, it takes up more vertical space so not too ideal. If this feature already exist for bubble-card slider, please guide me on how to achieve this.

Thank you!

[Menelao147]

I took inspiration from the discussion #1197
I modified the code to extract the position value of the slider bar, there is some lag, but I couldn't do better

This code only works with an input_number.

:host {
  --slider-value: "${(() => {
    const min = parseFloat(hass.states[entity].attributes.min);
    const max = parseFloat(hass.states[entity].attributes.max);
    const step = parseFloat(hass.states[entity].attributes.step);
    const slider = card.querySelector('.bubble-range-fill');
    const transform = slider ? slider.style.transform : "";
    const match = transform.match(/translateX\((\d+(\.\d+)?)%\)/);
    const percentage = match ? parseFloat(match[1]) : 0;
    let newValue = min + ((max - min) * (percentage / 100));
    newValue = Math.round(newValue / step) * step;
    return newValue;
  })()}";
}

.bubble-range-fill {
  background: rgba(77, 154, 169, 1) !important;
  opacity: 1 !important;
}

.bubble-range-fill::after {
  content: var(--slider-value);
  font-weight: bold;
  color: black;
  background: LightGray;
  padding: 5px 10px;
  border-radius: 25px;
  position: absolute;
  top: 10px;
  right: 10px;
}

---

_{If this solves your problem, mark this as solved and close the discussion.}

[vyas-s]

I took inspiration from the discussion #1197 I modified the code to extract the position value of the slider bar, there is some lag, but I couldn't do better

This code only works with an input_number.

:host {
  --slider-value: "${(() => {
    const min = parseFloat(hass.states[entity].attributes.min);
    const max = parseFloat(hass.states[entity].attributes.max);
    const step = parseFloat(hass.states[entity].attributes.step);
    const slider = card.querySelector('.bubble-range-fill');
    const transform = slider ? slider.style.transform : "";
    const match = transform.match(/translateX\((\d+(\.\d+)?)%\)/);
    const percentage = match ? parseFloat(match[1]) : 0;
    let newValue = min + ((max - min) * (percentage / 100));
    newValue = Math.round(newValue / step) * step;
    return newValue;
  })()}";
}

.bubble-range-fill {
  background: rgba(77, 154, 169, 1) !important;
  opacity: 1 !important;
}

.bubble-range-fill::after {
  content: var(--slider-value);
  font-weight: bold;
  color: black;
  background: LightGray;
  padding: 5px 10px;
  border-radius: 25px;
  position: absolute;
  top: 10px;
  right: 10px;
}

If this solves your problem, mark this as solved and close the discussion.

It is great that you got it working this much, but it would be just perfect if it updates in real time.

[Menelao147]

To update it in real time, you need to enable the Slider live update option in Button settings

---

_{If this solves your problem, mark this as solved and close the discussion.}

[bigemme]

To update it in real time, you need to enable the Slider live update option in Button settings

If this solves your problem, mark this as solved and close the discussion.

Not working :(, any hints?

Core 2025.2.4
Supervisor 2025.02.1
Operating System 14.2
Frontend 20250214.0

[Menelao147]

This code only works with input_number, are you using other entities?