hensei-web/components/Slider/index.tsx
Justin Edmund 9b7b54b562 Implement custom Slider component
This inherits from Radix's Slider
2023-03-21 19:20:05 -07:00

30 lines
812 B
TypeScript

import React from 'react'
import * as SliderPrimitive from '@radix-ui/react-slider'
import type { SliderProps } from '@radix-ui/react-slider'
import classNames from 'classnames'
import './index.scss'
interface Props {}
const Slider = React.forwardRef<HTMLDivElement, Props & SliderProps>(
(props, forwardedRef) => {
const value = props.value || props.defaultValue
return (
<SliderPrimitive.Slider
{...props}
className={classNames({ Slider: true }, props.className)}
ref={forwardedRef}
>
<SliderPrimitive.Track className="SliderTrack">
<SliderPrimitive.Range className="SliderRange" />
</SliderPrimitive.Track>
<SliderPrimitive.Thumb className="SliderThumb" />
</SliderPrimitive.Slider>
)
}
)
export default Slider