Change color of Custom UI "Range" component

Forge Forge UI Kit and Custom UI
,
1

Hi there,

we want to change the color of the Range Custom UI Component

The CSS rules for <input type=range...> doesn’t seem to have an effect.

image

Any ideas?

Thanks in advance!

2

If not via props the colors can be changed by using the components css variables.

input[type=range] {
  --thumb-bg: red;
  --track-bg: blue;
  --track-fg: yellow;
}

input[type=range]:hover:not(:disabled) {
  --thumb-bg: red;
  --track-bg: blue;
  --track-fg: yellow;
}
3

Thank @JulianWolf !

I had to update the component from 5.x to 7.x and now it works like a charm!