olly/modern-sk
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: animated slider

Browse Source
This commit is contained in:
ollyhearn
2026-06-02 15:26:32 +03:00
parent 49d6ac8a4e
commit 3b9d3f908d
2 changed files with 15 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/components.css
+7 -5
View File
@@ -626,8 +626,10 @@ textarea.modern-sk-field {
border-radius: 3px;
background: linear-gradient(90deg, var(--lime-deep), var(--lime));
box-shadow: 0 0 10px rgba(190, 242, 100, 0.4);
/* Radix positions the range via left/right offsets (not width); ease those
so the fill glides between discrete steps while dragging. */
}
/* Radix positions the range via left/right offsets (not width); ease those
so the fill glides between discrete steps while dragging. */
.modern-sk-slider--animated .modern-sk-slider__range {
transition:
left 0.12s ease-out,
right 0.12s ease-out;
@@ -647,12 +649,12 @@ textarea.modern-sk-field {
/* Radix sets the step position (left) on a WRAPPER span around the thumb, not on
the thumb element itself — so the transition must live on that wrapper. The
wrapper is the slider's direct child span that isn't the track. */
.modern-sk-slider > span:not(.modern-sk-slider__track) {
.modern-sk-slider--animated > span:not(.modern-sk-slider__track) {
transition: left 0.12s ease-out;
}
@media (prefers-reduced-motion: reduce) {
.modern-sk-slider > span:not(.modern-sk-slider__track),
.modern-sk-slider__range {
.modern-sk-slider--animated > span:not(.modern-sk-slider__track),
.modern-sk-slider--animated .modern-sk-slider__range {
transition: none;
}
}