Feat: Add DualRangeSlider #3221 (#5386)

### What problem does this PR solve?

Feat: Add DualRangeSlider #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/top-n-item.tsx

@@ -1,6 +1,7 @@
 import { useTranslate } from '@/hooks/common-hooks';
 import { Form, Slider } from 'antd';
 import { useFormContext } from 'react-hook-form';
+import { SingleFormSlider } from './ui/dual-range-slider';
 import {
   FormControl,
   FormField,
@@ -8,7 +9,6 @@ import {
   FormLabel,
   FormMessage,
 } from './ui/form';
-import { FormSlider } from './ui/slider';
 
 type FieldType = {
   top_n?: number;
@@ -52,7 +52,7 @@ export function TopNFormField({ max = 30 }: SimilaritySliderFormFieldProps) {
         <FormItem>
           <FormLabel>{t('topN')}</FormLabel>
           <FormControl>
-            <FormSlider {...field} max={max}></FormSlider>
+            <SingleFormSlider {...field} max={max}></SingleFormSlider>
           </FormControl>
           <FormMessage />
         </FormItem>