import { ParameterSlider } from "@/components/tool-ui/parameter-slider"; Text input is a poor fit for numeric tuning. When the user needs to dial in image exposure, audio levels, or model temperature, ParameterSlider renders grouped sliders with labels, units, and Reset/Apply actions. The confirmed values feed back to the assistant as a tool result. **Role:** Control. Adjusts parameters without commitment. See [Design Guidelines](/docs/design-guidelines) for how component roles work. ## Getting Started Run this once from your project root. Render `ParameterSlider` in your UI with tool-compatible props.

```tsx import { ParameterSlider } from "@/components/tool-ui/parameter-slider"; export function Example() { return ( { console.log(actionId, values); }} /> ); } ```

Register this renderer so tool results display as `ParameterSlider`. ```tsx "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"; export const toolkit: Toolkit = { adjust_parameters: { description: "Adjust numeric parameters with sliders", parameters: SerializableParameterSliderSchema, render: ({ args, toolCallId, addResult }) => { const parsedArgs = safeParseSerializableParameterSlider({ ...args, id: args?.id ?? `parameter-slider-${toolCallId}`, }); if (!parsedArgs) { return null; } return ( { if (actionId === "apply") { void addResult?.({ values }); } }} /> ); }, }, }; ``` ## Key Features Group related sliders under shared Reset/Apply actions Label and current value sit directly on the slider track Show domain-specific units: EV, dB, %, Mbps, or custom strings Arrow keys adjust values; screen readers announce the unit ## Props ### ParameterSlider void", }, actions: { description: "Action buttons (defaults to Reset/Apply)", type: "Action[] | ActionsConfig", }, onAction: { description: "Called when an action button is clicked with post-action values", type: "(actionId: string, values: SliderValue[]) => void | Promise", }, onBeforeAction: { description: "Called before action with current values, return false to cancel", type: "(actionId: string, values: SliderValue[]) => boolean | Promise", }, className: { description: "Additional CSS classes", type: "string", }, }} /> ### SliderConfig ### SliderValue ## Accessibility - Full keyboard support: Tab to focus, Arrow keys to adjust values - `aria-valuetext` includes unit for screen readers (e.g., "plus 0.3 EV") - Tick marks provide visual reference for the range - Disabled state reduces opacity and disables pointer interactions ## Related - [Preferences Panel](/docs/preferences-panel): structured settings with switches, toggles, and selects

Tool UI