Parameter Slider
Slider for adjusting AI model parameters (temperature, max tokens, top-p) with presets. Features tooltips, value display, and quick preset buttons for common configurations.
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
Multiple Parameters
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
ParameterPreset Interface
TypeScripttypescript
Props
| Name | Type | Default | Description |
|---|---|---|---|
labelRequired | string | — | Parameter label |
labelAr | string | — | Parameter label in Arabic |
description | string | — | Parameter description/tooltip |
descriptionAr | string | — | Parameter description in Arabic |
valueRequired | number | — | Current value |
onValueChangeRequired | (value: number) => void | — | Callback when value changes |
min | number | 0 | Minimum value |
max | number | 1 | Maximum value |
step | number | 0.1 | Step size |
decimals | number | 1 | Number of decimal places to display |
presets | ParameterPreset[] | — | Preset values |
showValue | boolean | true | Show value display |
isRTL | boolean | false | Whether text direction is RTL |
className | string | — | Additional CSS classes |
Accessibility
Screen Reader
The slider includes proper labels and ARIA attributes. Tooltips provide additional context for parameters and presets. Current value is announced when changed.
Keyboard Navigation
- Tab: Navigate to slider or preset buttons
- ← / →: Adjust value (on slider)
- Enter: Select preset (on button)
- Home / End: Jump to min/max
Visual Feedback
Current value is displayed in a badge. Active preset is highlighted. Range labels show min/max values for context.
RTL Considerations
The slider works seamlessly in RTL layouts. Labels, tooltips, and presets all support Arabic translations via the *Ar props.
LTR (English)
0.7
0.02.0
RTL (العربية)
0.7
0.02.0