Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[bug] --range-pip-in-range-text color not applied on the pip matching the current value #60

Closed
gbcreation opened this issue Feb 15, 2022 · 3 comments
Labels
bug Something isn't working investigating Not quite sure if it's valid, yet

Comments

@gbcreation
Copy link

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

Screenshot_20220215_114952

@gbcreation gbcreation added bug Something isn't working investigating Not quite sure if it's valid, yet labels Feb 15, 2022
@simeydotme
Copy link
Owner

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
Copy link
Author

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
Copy link
Owner

--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;

image

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 simeydotme pinned this issue Feb 16, 2022
Repository owner locked and limited conversation to collaborators Feb 16, 2022
@simeydotme simeydotme converted this issue into discussion #61 Feb 16, 2022

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
bug Something isn't working investigating Not quite sure if it's valid, yet
Projects
None yet
Development

No branches or pull requests

2 participants