Slider

1import {
2  Host as HostPrimitive,
3  Slider as SliderPrimitive,
4  type SliderProps as SliderPrimitiveProps,
5} from "@expo/ui";
6import { tint } from "@expo/ui/swift-ui/modifiers";
7import { useCSSVariable, withUniwind } from "uniwind";
8import { cn } from "@/lib/utils";
9 
10// Types
11type SliderProps = Omit<SliderPrimitiveProps, "modifiers"> & {
12  className?: string;
13};
14 
15// Components
16const StyledHost = withUniwind(HostPrimitive);
17 
18export function Slider({
19  className,
20  max = 100,
21  min = 0,
22  step = 1,
23  ...props
24}: SliderProps) {
25  const primaryColor = useCSSVariable("--color-primary") as string;
26 
27  return (
28    <StyledHost className={cn("w-full flex-1", className)}>
29      <SliderPrimitive
30        {...props}
31        max={max}
32        min={min}
33        modifiers={[tint(primaryColor)]}
34        step={step}
35      />
36    </StyledHost>
37  );
38}