Slider

A range input you can move with the keyboard or the mouse, and a custom slider that only responds to dragging.

Range input (0–100)

Value: 25

Custom slider (drag only)

Value: 50

Practice tasks

Move the range input to 75 with arrow keys and assert the displayed value.
Set the range value with JavaScript and fire the input event, then assert the display updates.
Drag the custom slider handle to the right and assert the value increases.
Drag it fully to the left and assert the value becomes 0.
Assert the aria-valuenow attribute matches the shown value.

Sample automation code

WebElement slider = driver.findElement(By.id("range-slider"));
for (int i = 0; i < 50; i++) { slider.sendKeys(Keys.ARROW_RIGHT); }
Assert.assertEquals(driver.findElement(By.id("range-value")).getText(), "75");

WebElement handle = driver.findElement(By.id("custom-slider-handle"));
new Actions(driver).dragAndDropBy(handle, 80, 0).perform();

await page.getByTestId('range-slider').fill('75');
await expect(page.getByTestId('range-value')).toHaveText('75');

const handle = page.getByTestId('custom-slider-handle');
const box = await handle.boundingBox();
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
await page.mouse.down();
await page.mouse.move(box.x + 120, box.y + box.height / 2);
await page.mouse.up();