matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

nicolium: migrate slider/step slider

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2026-03-09 23:03:19 +01:00
parent 8a95b050eb
commit 24a733914c
3 changed files with 59 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
packages/nicolium/src/components/ui/slider.tsx
View File

@ -139,24 +139,15 @@ const Slider: React.FC<ISlider> = ({
return (
<div
className='relative inline-flex h-6 cursor-pointer transition'
className={clsx('⁂-slider', animateKeyboardInput && '⁂-slider--animate')}
onMouseDown={handleMouseDown}
ref={node}
>
<div className='absolute top-1/2 h-1 w-full -translate-y-1/2 rounded-full bg-primary-200 dark:bg-primary-700' />
<div
className={clsx(
'absolute top-1/2 h-1 -translate-y-1/2 rounded-full bg-accent-500 transition-[width] ease-in-out',
animateKeyboardInput ? 'duration-150' : 'duration-0',
)}
style={{ width: `${value * 100}%` }}
/>
<div className='⁂-slider__track' />
<div className='⁂-slider__fill' style={{ width: `${value * 100}%` }} />
<span
id={id}
className={clsx(
'absolute top-1/2 z-10 -ml-1.5 size-3 -translate-y-1/2 rounded-full bg-accent-500 shadow transition-[left] ease-in-out',
animateKeyboardInput ? 'duration-150' : 'duration-0',
)}
className='⁂-slider__thumb'
tabIndex={0}
style={{ left: `${value * 100}%` }}
role='slider'

17
packages/nicolium/src/components/ui/step-slider.tsx
View File

@ -106,26 +106,19 @@ const StepSlider: React.FC<IStepSlider> = ({
};
return (
<div
className='relative inline-flex h-6 cursor-pointer transition'
onMouseDown={handleMouseDown}
ref={node}
>
<div className='absolute top-1/2 h-1 w-full -translate-y-1/2 rounded-full bg-primary-200 dark:bg-primary-700' />
<div
className='absolute top-1/2 h-1 -translate-y-1/2 rounded-full bg-accent-500'
style={{ width: `${(value / (steps - 1)) * 100}%` }}
/>
<div className='⁂-step-slider' onMouseDown={handleMouseDown} ref={node}>
<div className='⁂-step-slider__track' />
<div className='⁂-step-slider__fill' style={{ width: `${(value / (steps - 1)) * 100}%` }} />
{[...Array(steps).fill(undefined)].map((_, step) => (
<span
key={step}
className='absolute top-1/2 z-10 h-3 w-1 -translate-y-1/2 bg-accent-300'
className='⁂-step-slider__step'
style={{ left: `${(step / (steps - 1)) * 100}%` }}
/>
))}
<span
id={id}
className='absolute top-1/2 z-10 -ml-1.5 size-3 -translate-y-1/2 rounded-full bg-accent-500 shadow transition-[left] duration-100 ease-in-out'
className='⁂-step-slider__thumb'
tabIndex={0}
role='slider'
aria-valuemin={0}

50
packages/nicolium/src/styles/new/components.scss
View File

@ -1232,3 +1232,53 @@ div[data-viewport-type='window']:has(.⁂-empty-message) {
background-color: rgb(var(--color-secondary-500));
}
}
.⁂-slider {
position: relative;
display: inline-flex;
height: 1.5rem;
cursor: pointer;
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
&__track {
@apply absolute top-1/2 h-1 w-full -translate-y-1/2 rounded-full bg-primary-200 dark:bg-primary-700;
}
&__fill {
@apply absolute top-1/2 h-1 -translate-y-1/2 rounded-full bg-accent-500 transition-[width] duration-0 ease-in-out;
}
&__thumb {
@apply absolute top-1/2 z-10 -ml-1.5 size-3 -translate-y-1/2 rounded-full bg-accent-500 shadow transition-[left] duration-0 ease-in-out;
}
&--animate {
.⁂-slider__fill {
@apply duration-150;
}
}
}
.⁂-step-slider {
position: relative;
display: inline-flex;
height: 1.5rem;
cursor: pointer;
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
&__track {
@apply absolute top-1/2 h-1 w-full -translate-y-1/2 rounded-full bg-primary-200 dark:bg-primary-700;
}
&__fill {
@apply absolute top-1/2 h-1 -translate-y-1/2 rounded-full bg-accent-500;
}
&__step {
@apply absolute top-1/2 z-10 h-3 w-1 -translate-y-1/2 bg-accent-300;
}
&__thumb {
@apply absolute top-1/2 z-10 -ml-1.5 size-3 -translate-y-1/2 rounded-full bg-accent-500 shadow transition-[left] duration-100 ease-in-out;
}
}