Comments (3)
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;
from svelte-range-slider-pips.
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?
from svelte-range-slider-pips.
--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.
from svelte-range-slider-pips.
Related Issues (20)
- [bug] Doesn't work with sveltekit `immutable` flag HOT 4
- Slider won't appear inside of the nested component HOT 2
- [feature] A11y label HOT 2
- [feature] a 'range gap' or similar property that maintains a gap between range slider handles HOT 2
- [bug] pipstep is incorrect in certain scenario
- [feature] change shift+left/right behaviour
- [improvement] ARIA role warning about wrapping div HOT 6
- Multiple subscription updates when binding to store HOT 1
- [docs] Broken links on docs site HOT 5
- No documentation on how to force handle to be focused HOT 2
- Argument of type 'typeof RangeSlider' is not assignable to parameter of type 'ConstructorOfATypedSvelteComponent'. HOT 1
- Svelte Error HOT 1
- [bug] Expected a valid CSS identifier HOT 4
- [bug] Warning about svelte field in package.json (sveltekit v2, vite v5) HOT 12
- [bug] Min value can't be chosen using start pip HOT 5
- [bug] Svelte 5 Range handles are not moving when dragged. HOT 17
- Latest version breaks SSR due to use of document inside pureText HOT 2
- ReferenceError: document is not defined
- css class prefix for x-library compatibility
- Disable moving backwards HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svelte-range-slider-pips.