Implementation:Infiniflow Ragflow SliderInputFormField Component

Knowledge Sources	Infiniflow_Ragflow
Domains	Frontend, UI_Components, Form_System
Last Updated	2026-02-12 06:00 GMT

Overview

Concrete combined slider and numeric input form field with percentage mode support provided by the RAGFlow frontend.

Description

The SliderInputFormField component pairs a slider with a number input for precise value selection. Supports percentage mode (multiplies stored value by 100 for display), configurable min/max/step, and integrates with react-hook-form via the RAGFlowFormItem wrapper.

Usage

Import this component for any numeric configuration field that benefits from both slider and direct input, such as similarity thresholds, temperature settings, or token limits.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/components/slider-input-form-field.tsx
• Lines: 1-117

Signature

export function SliderInputFormField({
  max, min, step, name, label, tooltip,
  defaultValue, className, numberInputClassName,
  percentage, layout,
}: {
  max?: number;
  min?: number;
  step?: number;
  name: string;
  label: string;
  tooltip?: ReactNode;
  defaultValue?: number;
  className?: string;
  numberInputClassName?: string;
  percentage?: boolean;
  layout?: FormLayout;
}): JSX.Element;

Import

import { SliderInputFormField } from '@/components/slider-input-form-field';

I/O Contract

Inputs

Name	Type	Required	Description
name	string	Yes	Form field name for react-hook-form
label	string	Yes	Display label
min	number	No	Minimum value
max	number	No	Maximum value
step	number	No	Step increment
percentage	boolean	No	Display value as percentage

Outputs

Name	Type	Description
Form value	number	Selected numeric value via react-hook-form

Usage Examples

import { SliderInputFormField } from '@/components/slider-input-form-field';

<SliderInputFormField
  name="similarity_threshold"
  label="Similarity Threshold"
  min={0}
  max={1}
  step={0.01}
  percentage={true}
  tooltip="Minimum similarity score for retrieval"
/>

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment