girineko/YesPlayMusic
1
0
Fork 0
mirror of https://github.com/GiriNeko/YesPlayMusic.git synced 2025-12-17 21:58:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: updates

Browse source
This commit is contained in:
qier222 2022-10-28 20:29:04 +08:00
parent a1b0bcf4d3
commit 884f3df41a
No known key found for this signature in database
198 changed files with 4572 additions and 5336 deletions
Download patch file Download diff file Expand all files Collapse all files

43
packages/web/components/Slider.tsx
View file

@ -8,7 +8,6 @@ const Slider = ({
onChange,
onlyCallOnChangeAfterDragEnded = false,
orientation = 'horizontal',
alwaysShowTrack = false,
alwaysShowThumb = false,
}: {
value: number
@ -95,7 +94,6 @@ const Slider = ({
if (!isDragging) return
setIsDragging(false)
if (onlyCallOnChangeAfterDragEnded) {
console.log('draggingValue', draggingValue)
onChange(draggingValue)
}
}
@ -141,41 +139,36 @@ const Slider = ({
{/* Track */}
<div
className={cx(
'absolute bg-gray-500 bg-opacity-10',
orientation === 'horizontal' && 'h-[2px] w-full',
orientation === 'vertical' && 'h-full w-[2px]'
'absolute overflow-hidden rounded-full bg-black/10 bg-opacity-10 dark:bg-white/10',
orientation === 'horizontal' && 'h-[3px] w-full',
orientation === 'vertical' && 'h-full w-[3px]'
)}
></div>
{/* Passed track */}
<div
className={cx(
'absolute group-hover:bg-brand-500',
isDragging || alwaysShowTrack
? 'bg-brand-500'
: 'bg-gray-300 dark:bg-gray-500',
orientation === 'horizontal' && 'h-[2px]',
orientation === 'vertical' && 'bottom-0 w-[2px]'
)}
style={usedTrackStyle}
></div>
>
{/* Passed track */}
<div
className={cx(
'bg-black dark:bg-white',
orientation === 'horizontal' && 'h-full rounded-r-full',
orientation === 'vertical' && 'bottom-0 w-full rounded-t-full'
)}
style={usedTrackStyle}
></div>
</div>
{/* Thumb */}
<div
className={cx(
'absolute flex h-5 w-5 items-center justify-center rounded-full bg-brand-500 bg-opacity-20 transition-opacity',
'absolute flex h-2 w-2 items-center justify-center rounded-full bg-black bg-opacity-20 transition-opacity dark:bg-white',
isDragging || alwaysShowThumb
? 'opacity-100'
: 'opacity-0 group-hover:opacity-100',
orientation === 'horizontal' && '-translate-x-2.5',
orientation === 'vertical' && 'translate-y-2.5'
orientation === 'horizontal' && '-translate-x-1',
orientation === 'vertical' && 'translate-y-1'
)}
style={thumbStyle}
onClick={e => e.stopPropagation()}
onPointerDown={handlePointerDown}
>
<div className='absolute h-2 w-2 rounded-full bg-brand-500'></div>
</div>
></div>
</div>
)
}