Parameter Slider

Numeric parameter adjustment controls.

Bass+3 dB

Mid-2 dB

Treble+4 dB

<ParameterSlider  id="parameter-slider-audio-eq"  sliders={[    { id: "bass", label: "Bass", min: -12, max: 12, value: 3, unit: "dB" },    { id: "mid", label: "Mid", min: -12, max: 12, value: -2, unit: "dB" },    { id: "treble", label: "Treble", min: -12, max: 12, value: 4, unit: "dB" },  ]}  adjustmentActions={[      {          "id": "reset",          "label": "Flat",          "variant": "ghost"      },      {          "id": "apply",          "label": "Apply",          "variant": "default"      }  ]}  onAdjustmentAction={(actionId, values) => {    console.log(actionId, values);  }}/>

Getting Started

Run this once from your project root.

npx shadcn@latest add @tool-ui/parameter-slider

Render ParameterSlider in your UI with tool-compatible props.

import { ParameterSlider } from "@/components/tool-ui/parameter-slider";export function Example() {  return (    <ParameterSlider      id="parameter-slider-example"      sliders={[        { id: "exposure", label: "Exposure", min: -3, max: 3, step: 0.1, value: 0.3, unit: "EV", precision: 1 },        { id: "contrast", label: "Contrast", min: -100, max: 100, step: 5, value: 15, unit: "%" },        { id: "highlights", label: "Highlights", min: -100, max: 100, step: 5, value: -20, unit: "%" },      ]}      onAdjustmentAction={(actionId, values) => {        console.log(actionId, values);      }}    />  );}

"use client";import { type Toolkit } from "@assistant-ui/react";import { ParameterSlider } from "@/components/tool-ui/parameter-slider";import {  safeParseSerializableParameterSlider,  SerializableParameterSliderSchema,} from "@/components/tool-ui/parameter-slider/schema";import { createArgsToolRenderer } from "@/components/tool-ui/shared";export const toolkit: Toolkit = {  adjust_parameters: {    description: "Adjust numeric parameters with sliders",    parameters: SerializableParameterSliderSchema,    render: createArgsToolRenderer({      safeParse: safeParseSerializableParameterSlider,      idPrefix: "parameter-slider",      render: (parsedArgs, { addResult }) => (          <ParameterSlider            {...parsedArgs}            onAdjustmentAction={(actionId, values) => {              if (actionId === "apply") {                void addResult?.({ values });              }            }}          />      ),    }),  },};

These snippets use assistant-ui for end-to-end wiring, but the ParameterSlider component itself is framework-agnostic at the UI layer: you can use it in any React codebase with any LLM SDK or tool-calling interface that can provide compatible props.