feat: add slider component

Author: jaaydenh

site/package.json

@@ -13,6 +13,7 @@
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-slider": "^1.2.3",
     "@radix-ui/react-switch": "^1.1.3",
     "@tailwindcss/vite": "^4.0.9",
     "class-variance-authority": "^0.7.1",

site/pnpm-lock.yaml

@@ -15,7 +15,8 @@ import { useUsers } from './hooks/useUsers';
 import { useDirectories } from './hooks/useDirectories';
 import { useDebouncedFunction } from './hooks/debounce';
 import { CollapsibleSummary } from "./components/CollapsibleSummary/CollapsibleSummary";
-import ReactJson from 'react-json-view'
+import { Slider } from "./components/ui/slider";
+import ReactJson from 'react-json-view';
 
 export function DynamicForm() {
   const serverAddress = "localhost:8100";
@@ -231,6 +232,32 @@ export function DynamicForm() {
               {renderDiagnostics(param.diagnostics)}
             </div>
           )
+        case "slider":
+          return (
+            <div key={param.name} className="flex flex-col gap-2 items-center">
+              <div className="flex items-center justify-between gap-2">
+                <label>
+                  {param.display_name || param.name}
+                  {param.icon && <img src={param.icon} alt="" style={{ marginLeft: 6 }} />}
+                </label>
+                <output className="text-sm font-medium tabular-nums">{param.value}</output>
+              </div>
+              {param.description && <div className="text-sm">{param.description}</div>}
+              <Controller
+                name={param.name}
+                control={methods.control}
+                render={({ field }) => (
+                  <div className="w-[300px]">
+                      <Slider defaultValue={field.value ? [Number(field.value)] : [0]} max={param.validations[0].validation_max || undefined} min={param.validations[0].validation_min || undefined} step={1}                       
+                      onValueChange={(value) => {
+                        console.log("value", value[0].toString());
+                        field.onChange(value[0].toString());
+                      }}/>
+                  </div>
+                )}
+              />
+            </div>
+          )
       }
     }
 

site/src/DynamicForm.tsx

@@ -0,0 +1,61 @@
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "../../utils/cn"
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max]
+  )
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className={cn(
+          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+        )}
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className={cn(
+            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+          )}
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }