diff --git a/web/app/components/base/param-item/__tests__/index-slider.spec.tsx b/web/app/components/base/param-item/__tests__/index-slider.spec.tsx
index 0048b89644..6448835844 100644
--- a/web/app/components/base/param-item/__tests__/index-slider.spec.tsx
+++ b/web/app/components/base/param-item/__tests__/index-slider.spec.tsx
@@ -14,12 +14,14 @@ describe('ParamItem Slider onChange', () => {
vi.clearAllMocks()
})
+ const getSlider = () => screen.getByLabelText('Test Param')
+
it('should divide slider value by 100 when max < 5', async () => {
const user = userEvent.setup()
render(
)
- const slider = screen.getByRole('slider')
+ const slider = getSlider()
- await user.click(slider)
+ slider.focus()
await user.keyboard('{ArrowRight}')
// max=1 < 5, so slider value change (50->51) becomes 0.51
@@ -29,9 +31,9 @@ describe('ParamItem Slider onChange', () => {
it('should not divide slider value when max >= 5', async () => {
const user = userEvent.setup()
render(
)
- const slider = screen.getByRole('slider')
+ const slider = getSlider()
- await user.click(slider)
+ slider.focus()
await user.keyboard('{ArrowRight}')
// max=10 >= 5, so value remains raw (5->6)
diff --git a/web/app/components/base/param-item/__tests__/index.spec.tsx b/web/app/components/base/param-item/__tests__/index.spec.tsx
index 96591446c8..889662c87d 100644
--- a/web/app/components/base/param-item/__tests__/index.spec.tsx
+++ b/web/app/components/base/param-item/__tests__/index.spec.tsx
@@ -17,6 +17,8 @@ describe('ParamItem', () => {
vi.clearAllMocks()
})
+ const getSlider = () => screen.getByLabelText('Test Param')
+
describe('Rendering', () => {
it('should render the parameter name', () => {
render(
)
@@ -54,7 +56,7 @@ describe('ParamItem', () => {
render(
)
expect(screen.getByRole('textbox')).toBeInTheDocument()
- expect(screen.getByRole('slider')).toBeInTheDocument()
+ expect(getSlider()).toBeInTheDocument()
})
})
@@ -74,7 +76,7 @@ describe('ParamItem', () => {
it('should disable Slider when enable is false', () => {
render(
)
- expect(screen.getByRole('slider')).toHaveAttribute('aria-disabled', 'true')
+ expect(getSlider()).toBeDisabled()
})
it('should set switch value based on enable prop', () => {
@@ -135,7 +137,7 @@ describe('ParamItem', () => {
await user.clear(input)
expect(defaultProps.onChange).toHaveBeenLastCalledWith('test_param', 0)
- expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', '0')
+ expect(getSlider()).toHaveAttribute('aria-valuenow', '0')
await user.tab()
@@ -166,12 +168,12 @@ describe('ParamItem', () => {
await user.type(input, '1.5')
expect(defaultProps.onChange).toHaveBeenLastCalledWith('test_param', 1)
- expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', '100')
+ expect(getSlider()).toHaveAttribute('aria-valuenow', '100')
})
it('should pass scaled value to slider when max < 5', () => {
render(
)
- const slider = screen.getByRole('slider')
+ const slider = getSlider()
// When max < 5, slider value = value * 100 = 50
expect(slider).toHaveAttribute('aria-valuenow', '50')
@@ -179,7 +181,7 @@ describe('ParamItem', () => {
it('should pass raw value to slider when max >= 5', () => {
render(
)
- const slider = screen.getByRole('slider')
+ const slider = getSlider()
// When max >= 5, slider value = value = 5
expect(slider).toHaveAttribute('aria-valuenow', '5')
@@ -212,15 +214,15 @@ describe('ParamItem', () => {
render(
)
// Slider should get value * 100 = 50, min * 100 = 0, max * 100 = 100
- const slider = screen.getByRole('slider')
- expect(slider).toHaveAttribute('aria-valuemax', '100')
+ const slider = getSlider()
+ expect(slider).toHaveAttribute('max', '100')
})
it('should not scale slider value when max >= 5', () => {
render(
)
- const slider = screen.getByRole('slider')
- expect(slider).toHaveAttribute('aria-valuemax', '10')
+ const slider = getSlider()
+ expect(slider).toHaveAttribute('max', '10')
})
it('should expose default minimum of 0 when min is not provided', () => {
diff --git a/web/app/components/base/param-item/__tests__/score-threshold-item.spec.tsx b/web/app/components/base/param-item/__tests__/score-threshold-item.spec.tsx
index 54a13e1b74..ddc286942b 100644
--- a/web/app/components/base/param-item/__tests__/score-threshold-item.spec.tsx
+++ b/web/app/components/base/param-item/__tests__/score-threshold-item.spec.tsx
@@ -14,6 +14,8 @@ describe('ScoreThresholdItem', () => {
vi.clearAllMocks()
})
+ const getSlider = () => screen.getByLabelText('appDebug.datasetConfig.score_threshold')
+
describe('Rendering', () => {
it('should render the translated parameter name', () => {
render(
)
@@ -32,7 +34,7 @@ describe('ScoreThresholdItem', () => {
render(
)
expect(screen.getByRole('textbox')).toBeInTheDocument()
- expect(screen.getByRole('slider')).toBeInTheDocument()
+ expect(getSlider()).toBeInTheDocument()
})
})
@@ -63,7 +65,7 @@ describe('ScoreThresholdItem', () => {
render(
)
expect(screen.getByRole('textbox')).toBeDisabled()
- expect(screen.getByRole('slider')).toHaveAttribute('aria-disabled', 'true')
+ expect(getSlider()).toBeDisabled()
})
})
diff --git a/web/app/components/base/param-item/__tests__/top-k-item.spec.tsx b/web/app/components/base/param-item/__tests__/top-k-item.spec.tsx
index 1b8555213b..c84fd50518 100644
--- a/web/app/components/base/param-item/__tests__/top-k-item.spec.tsx
+++ b/web/app/components/base/param-item/__tests__/top-k-item.spec.tsx
@@ -19,6 +19,8 @@ describe('TopKItem', () => {
vi.clearAllMocks()
})
+ const getSlider = () => screen.getByLabelText('appDebug.datasetConfig.top_k')
+
describe('Rendering', () => {
it('should render the translated parameter name', () => {
render(
)
@@ -37,7 +39,7 @@ describe('TopKItem', () => {
render(
)
expect(screen.getByRole('textbox')).toBeInTheDocument()
- expect(screen.getByRole('slider')).toBeInTheDocument()
+ expect(getSlider()).toBeInTheDocument()
})
})
@@ -52,7 +54,7 @@ describe('TopKItem', () => {
render(
)
expect(screen.getByRole('textbox')).toBeDisabled()
- expect(screen.getByRole('slider')).toHaveAttribute('aria-disabled', 'true')
+ expect(getSlider()).toBeDisabled()
})
})
@@ -77,10 +79,10 @@ describe('TopKItem', () => {
it('should render slider with max >= 5 so no scaling is applied', () => {
render(
)
- const slider = screen.getByRole('slider')
+ const slider = getSlider()
// max=10 >= 5 so slider shows raw values
- expect(slider).toHaveAttribute('aria-valuemax', '10')
+ expect(slider).toHaveAttribute('max', '10')
})
it('should not render a switch (no hasSwitch prop)', () => {
@@ -116,9 +118,9 @@ describe('TopKItem', () => {
it('should call onChange with integer value when slider changes', async () => {
const user = userEvent.setup()
render(
)
- const slider = screen.getByRole('slider')
+ const slider = getSlider()
- await user.click(slider)
+ slider.focus()
await user.keyboard('{ArrowRight}')
expect(defaultProps.onChange).toHaveBeenLastCalledWith('top_k', 3)
diff --git a/web/app/components/base/param-item/index.tsx b/web/app/components/base/param-item/index.tsx
index 63af4bca84..56999fc6ea 100644
--- a/web/app/components/base/param-item/index.tsx
+++ b/web/app/components/base/param-item/index.tsx
@@ -1,8 +1,8 @@
'use client'
import type { FC } from 'react'
-import Slider from '@/app/components/base/slider'
import Switch from '@/app/components/base/switch'
import Tooltip from '@/app/components/base/tooltip'
+import { Slider } from '@/app/components/base/ui/slider'
import {
NumberField,
NumberFieldControls,
@@ -78,7 +78,8 @@ const ParamItem: FC
= ({ className, id, name, noTooltip, tip, step = 0.1,
value={max < 5 ? value * 100 : value}
min={min < 1 ? min * 100 : min}
max={max < 5 ? max * 100 : max}
- onChange={value => onChange(id, value / (max < 5 ? 100 : 1))}
+ onValueChange={value => onChange(id, value / (max < 5 ? 100 : 1))}
+ aria-label={name}
/>