Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/openstatusHQ/openstatus. 🫖 Status page with uptime monitoring & API monitoring as code 🫖 openstatus.dev
bun drizzle-orm monitoring monitoring-as-code nextjs observability on-call open-source shadcn-ui status-page statuspage synthetic-monitoring tinybird turso uptime uptime-checker uptime-monitor
Something went wrong. Try again.
1.2 kB · 36 lines
TSX
at main
12345678910111213141516171819202122232425262728293031323334353637"use client";
import { cn } from "@openstatus/ui/lib/utils";import * as SliderPrimitive from "@radix-ui/react-slider";import * as React from "react";
function Slider({ className, ...props}: React.ComponentProps<typeof SliderPrimitive.Root>) { const initialValue = Array.isArray(props.value) ? props.value : [props.min, props.max];
return ( <SliderPrimitive.Root data-slot="slider" className={cn( "relative flex w-full touch-none items-center select-none", className, )} {...props} > <SliderPrimitive.Track className="bg-secondary relative h-2 w-full grow overflow-hidden rounded-full"> <SliderPrimitive.Range className="bg-primary absolute h-full" /> </SliderPrimitive.Track> {initialValue.map((_, index) => ( <React.Fragment key={index}> <SliderPrimitive.Thumb className="border-primary bg-background focus-visible:border-ring focus-visible:ring-ring/50 block h-4 w-4 rounded-full border-2 transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50" /> </React.Fragment> ))} </SliderPrimitive.Root> );}
export { Slider };