Parameter Slider
Specialized 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.