Implementation:FlowiseAI Flowise InputSlider
| Knowledge Sources | |
|---|---|
| Domains | UI Components, Form Input |
| Last Updated | 2026-02-12 07:00 GMT |
Overview
The InputSlider component combines a custom-styled Material-UI slider with a numeric text input, allowing users to set a value by dragging or typing directly.
Description
InputSlider renders a CustomInputSlider (a styled MUI Slider with iOS-inspired thumb and track styling) alongside a number Input field in a horizontal grid layout. The slider ranges from 0 to 5000 with a step of 10, while the text input allows values up to 10000. Both controls are synchronized: changing one updates the other via the shared onChange callback. The handleBlur function enforces a minimum value of 0. The slider displays its current value label above the thumb via valueLabelDisplay="on".
Usage
Use this component for node parameters that accept numeric values within a range, such as max token counts, character limits, or timeout durations, where both precise input and visual sliding are useful.
Code Reference
Source Location
- Repository: FlowiseAI Flowise
- File: packages/ui/src/ui-component/slider/InputSlider.jsx
- Lines: 1-105
Signature
export const InputSlider = ({ value, onChange }) => {
// ...
}
Import
import { InputSlider } from '@/ui-component/slider/InputSlider'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| value | number | Yes | The current numeric value displayed by both the slider and the text input |
| onChange | func | Yes | Callback invoked with the new numeric value when the slider or input changes |
Outputs
| Name | Type | Description |
|---|---|---|
| Rendered JSX | React element | A horizontal layout with a styled slider (0-5000, step 10) and a number input (0-10000) |
Usage Examples
Basic Usage
const [maxTokens, setMaxTokens] = useState(2000)
<InputSlider
value={maxTokens}
onChange={(newValue) => setMaxTokens(newValue)}
/>