47 lines
959 B
TypeScript
47 lines
959 B
TypeScript
import React from 'react'
|
|
import * as SliderPrimitive from '@radix-ui/react-slider'
|
|
import { twMerge } from 'tailwind-merge'
|
|
|
|
import './styles.scss'
|
|
|
|
type Props = {
|
|
name?: string
|
|
min?: number
|
|
max?: number
|
|
onValueChange?(value: number[]): void
|
|
value?: number[]
|
|
defaultValue?: number[]
|
|
step?: number
|
|
disabled?: boolean
|
|
}
|
|
|
|
const Slider = ({
|
|
name,
|
|
min,
|
|
max,
|
|
onValueChange,
|
|
value,
|
|
defaultValue,
|
|
step,
|
|
disabled,
|
|
}: Props) => (
|
|
<SliderPrimitive.Root
|
|
className={twMerge('slider', disabled && 'slider--disabled')}
|
|
name={name}
|
|
min={min}
|
|
max={max}
|
|
onValueChange={onValueChange}
|
|
value={value}
|
|
defaultValue={defaultValue}
|
|
step={step}
|
|
disabled={disabled}
|
|
>
|
|
<SliderPrimitive.Track className="slider__track">
|
|
<SliderPrimitive.Range className="slider__range" />
|
|
</SliderPrimitive.Track>
|
|
<SliderPrimitive.Thumb className="slider__thumb" />
|
|
</SliderPrimitive.Root>
|
|
)
|
|
|
|
export { Slider }
|