How to set Colours on specific Pips / Labels

[gbcreation]

Describe the bug

When the current value of the slider matches exactly one of the pip, the --range-pip-in-range-text color is not applied to that pip.

To Reproduce

Steps to reproduce the behavior:

1. Open this REPL
2. See that while the current value is 10, the pip for 10 is not in orange while its value is in the range.

Expected behavior

All pips in the range should be in orange, including the one matching exactly the current value.

Screenshots

[simeydotme]

hi, @gbcreation this is not considered a bug, this is the correct styling/behaviour as I intended. You may set the css color values for in-range and selected to be the same if that's your desired aesthetic :)

--range-pip-active-text: orange;

[gbcreation]

Hi @simeydotme thank you for your quick answer. --range-pip-active-text works indeed for the color of the pip text, but not for the color of the pip (small line) itself. See this new REPL. Is there another CSS variable for that?

[simeydotme]

--range-pip-active: orange;

:)

I should have documented all of these, but essentially u can inspect the elements with devtools and see all the css variables;

all the variables have an override (--range-xxxxxxxx) value which is not set, so to override the default colors, just set those properties that begin with --range-

.rangeSlider {
  --pip: var(--range-pip, lightslategray);
  --pip-text: var(--range-pip-text, var(--pip));
  --pip-active: var(--range-pip-active, darkslategrey);
  --pip-active-text: var(--range-pip-active-text, var(--pip-active));
  --pip-hover: var(--range-pip-hover, darkslategrey);
  --pip-hover-text: var(--range-pip-hover-text, var(--pip-hover));
  --pip-in-range: var(--range-pip-in-range, var(--pip-active));
  --pip-in-range-text: var(--range-pip-in-range-text, var(--pip-active-text));
}
.rangeSlider {
  --slider: var(--range-slider, #d7dada);
  --handle-inactive: var(--range-handle-inactive, #99a2a2);
  --handle: var(--range-handle, #838de7);
  --handle-focus: var(--range-handle-focus, #4a40d4);
  --handle-border: var(--range-handle-border, var(--handle));
  --range-inactive: var(--range-range-inactive, var(--handle-inactive));
  --range: var(--range-range, var(--handle-focus));
  --float-inactive: var(--range-float-inactive, var(--handle-inactive));
  --float: var(--range-float, var(--handle-focus));
  --float-text: var(--range-float-text, white);
}

If you want to contribute by adding some documentation for that to the gh-pages branch please go ahead, for now I'll pin this topic until I get some time to work on it.

[simeydotme]

Oh, you may also want;

--range-pip-hover: orange

[gbcreation]

Nice! :) Thank you for the explanations 👍