Overview
A temperature slider component for AI model settings with preset labels (Precise, Balanced, Creative, Wild) that help users understand the effect of different temperature values.
Installation
bunx shadcn@latest add @elements/temperature-sliderUsage
import { TemperatureSlider } from "@/components/elements/ai-elements/chat/temperature-slider";
import { useState } from "react";
export function TemperatureControl() {
const [temperature, setTemperature] = useState(0.7);
return (
<TemperatureSlider
value={temperature}
onValueChange={setTemperature}
showPresets
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | - | Current temperature value |
onValueChange | (value: number) => void | - | Callback when value changes |
min | number | 0 | Minimum value |
max | number | 2 | Maximum value |
step | number | 0.1 | Step increment |
showPresets | boolean | true | Show preset labels |
className | string | - | Additional CSS classes |
Presets
- Precise (0.0-0.3): Deterministic, focused responses
- Balanced (0.3-0.7): Good balance of creativity and accuracy
- Creative (0.7-1.2): More varied and creative responses
- Wild (1.2-2.0): Maximum creativity and randomness
Features
- Smooth slider with visual feedback
- Preset labels for guidance
- Configurable range and step
- Current value display