Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: style for the slider component #357

Merged
merged 1 commit into from
Aug 16, 2024
Merged

feat: style for the slider component #357

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/elements/slider/slider-range.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ import type { VariantProps } from '@/tailwind'
export interface Comp extends React.ElementRef<typeof SliderPrimitive.Range> {}
export interface Props extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Range>, VariantProps<typeof sliderRange> {}

const SliderRange = React.forwardRef<Comp, Props>(({ className, background, ...props }, ref) => (
const SliderRange = React.forwardRef<Comp, Props>(({ className, variant, ...props }, ref) => (
<SliderPrimitive.Range
ref={ref}
className={cn(sliderRange({ background }), className)}
className={cn(sliderRange({ variant }), className)}
{...props}
/>
))
Expand Down
61 changes: 45 additions & 16 deletions src/components/elements/slider/slider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,54 @@ import { cn, slider } from '@/tailwind'
export interface Comp extends React.ElementRef<typeof SliderPrimitive.Root> {}
export interface Props extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>,
VariantProps<typeof slider> {
background?: 'error' | 'primary' | 'success' | 'warn' | null | undefined
variant?: 'error' | 'primary' | 'success' | 'warn' | null | undefined
styles?: string
values?: boolean
}

const Slider = React.forwardRef<Comp, Props>(({ className, styles, background = 'primary', ...props }, ref) => (
<SliderPrimitive.Root
ref={ref}
className={cn(
slider(),
className,
)}
{...props}
>
<SliderTrack>
<SliderRange background={background} className={styles} />
</SliderTrack>
<SliderPrimitive.Thumb className={`block h-5 w-5 rounded-full border-2 border-${background} bg-${background} shadow-${background} ring-offset-${background} transition-colors focus-visible:outline-none focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50`} />
</SliderPrimitive.Root>
))
const Slider = React.forwardRef<Comp, Props>(({ className, styles, values = false, variant = 'primary', ...props }, ref) => {
const [value, setValue] = React.useState<number[]>(props.defaultValue || [0])

return (
<div className="w-full">
<SliderPrimitive.Root
ref={ref}
className={cn(
slider(),
className,
)}
{...props}
value={value}
onValueChange={newValue => setValue(newValue)}
>
<SliderTrack>
<SliderRange variant={variant} className={styles} />
</SliderTrack>
<SliderPrimitive.Thumb className="block size-6 flex justify-center rounded-full bg-white border shadow-medium transition-colors focus-visible:outline-none focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50">
{
values
? (
<p className="-mt-5">
{value[0]}
</p>
)
: ''
}
</SliderPrimitive.Thumb>
</SliderPrimitive.Root>
{
values
? (
<div className="flex w-full justify-between mt-2">
<p className="text-black">{props.min ? props.min : 0}</p>
<p className="text-black">{props.max ? props.max : 100}</p>
</div>
)
: ''
}
</div>
)
})

Slider.displayName = SliderPrimitive.Root.displayName

Expand Down
10 changes: 5 additions & 5 deletions src/plugins/components/slider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export const slider = cva('relative flex w-full touch-none select-none items-cen
* @example
* <Track className={styles()} />
*/
export const sliderTrack = cva('relative h-2 w-full grow overflow-hidden rounded-full bg-default')
export const sliderTrack = cva('relative h-1 w-full grow overflow-hidden rounded-full bg-default')

/**
* Range wrapper **Class Variants** component
Expand All @@ -28,17 +28,17 @@ export const sliderTrack = cva('relative h-2 w-full grow overflow-hidden rounded
* @example
* <Range className={styles()} />
*/
export const sliderRange = cva('absolute h-full', {
export const sliderRange = cva('absolute h-1', {
variants: {
background: {
variant: {
primary: 'bg-primary',
success: 'bg-success',
warn: 'bg-warn',
error: 'bg-error',
},
},
defaultVariants: {
background: 'primary',
variant: 'primary',
},
})

Expand All @@ -50,4 +50,4 @@ export const sliderRange = cva('absolute h-full', {
* @example
* <Thumb className={styles()} />
*/
export const sliderThumb = cva('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')
export const sliderThumb = cva('block size-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')
Loading