julienfroidefond/stripstream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add opacity and blur adjustment controls in BackgroundSettings for enhanced user customization

Browse Source
This commit is contained in:
Julien Froidefond
2025-10-18 22:03:37 +02:00
parent 9024a78938
commit 8b4e117ead
3 changed files with 83 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/ui/slider.tsx
View File

@@ -12,15 +12,16 @@ const Slider = React.forwardRef<
<SliderPrimitive.Root
ref={ref}
className={cn(
"relative flex w-full touch-none select-none items-center",
"relative flex w-full touch-auto select-none items-center",
className
)}
style={{ touchAction: 'pan-x' }}
{...props}
>
<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
<SliderPrimitive.Track className="relative h-3 w-full grow overflow-hidden rounded-full bg-secondary">
<SliderPrimitive.Range className="absolute h-full bg-primary" />
</SliderPrimitive.Track>
<SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
<SliderPrimitive.Thumb className="block h-6 w-6 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:scale-110 active:scale-105 touch-manipulation cursor-pointer" />
</SliderPrimitive.Root>
))
Slider.displayName = SliderPrimitive.Root.displayName