Parameter Slider
View on StorybookStorybookSpecialized slider for AI model parameters. Shows real-time value, description, and recommended ranges. Perfect for settings like temperature, top-p, frequency penalty, and presence penalty.
Preview
0.7
0.02.0
Presets:
Installation
Terminalbash
Usage
Reacttsx
Examples
With Presets
0.7
0.02.0
Presets:
tsx
Custom Presets
1024
14096
Presets:
tsx
Max Tokens
0.7
0.02.0
Presets:
0.9
0.01.0
1024
14096
Current settings:
Temperature: 0.7, Top P: 0.9, Max Tokens: 1024
tsx
Without Presets
0.0
-2.02.0
Type Definitions
TypeScripttypescript
Props
| Name | Type | Default | Description |
|---|---|---|---|
labelRequired | string | — | Parameter name/label |
labelAr | string | — | |
description | string | — | Explanation of what this parameter does |
descriptionAr | string | — | |
valueRequired | number | — | Current parameter value |
onValueChangeRequired | (value: number) => void | — | |
min | number | 0 | Minimum allowed value |
max | number | 1 | Maximum allowed value |
step | number | 0.1 | Increment step for adjustments |
decimals | number | 1 | |
presets | ParameterPreset[] | — | |
showValue | boolean | true | Display current value next to slider |
isRTL | boolean | false | |
className | string | — |
Accessibility
Slider Control
The slider is fully keyboard accessible with arrow keys for fine control and Page Up/Down for larger steps.
Value Display
Current value is displayed visually and announced to screen readers.
Descriptions
Parameter descriptions help users understand what each setting controls.
Use Cases
AI temperature and top-p controls
Generation length settings
Model parameter fine-tuning
Creativity vs accuracy trade-off controls
Best Practices
Do
- ✓ Show the current value and parameter name clearly
- ✓ Provide sensible defaults for each parameter
- ✓ Include tooltips explaining what each parameter does
Don't
- ✗ Don't allow invalid parameter combinations
- ✗ Don't use without labels — always name the parameter
- ✗ Don't hide the numeric value