Implementation:Getgauge Taiko Range Element
| Knowledge Sources | |
|---|---|
| Domains | Browser_Automation, Form_Interaction |
| Last Updated | 2026-02-12 03:00 GMT |
Overview
Concrete tool for interacting with HTML range slider input elements provided by the Taiko browser automation library.
Description
The `Range` class extends the base `Element` class to represent `<input type="range">` elements in the DOM. It provides a `select(value)` method that sets the slider to a specified numeric value with validation against the element's `min` and `max` bounds (defaulting to 0 and 100 respectively if not specified). The method first retrieves the current range constraints via the internal `getRange()` function, validates that the provided value is a valid number (throwing an error if not), then uses the internal `setRange(value)` function to set the value through the native value setter and dispatch `change` and `input` events. If the provided value falls outside the min/max range, a console warning is emitted but the operation still proceeds (the browser will clamp the value). The `value()` method retrieves the current slider value. All mutations are wrapped in `doActionAwaitingNavigation` and the element is highlighted in headful mode.
Usage
Use this class when you need to automate range slider interactions such as adjusting volume controls, price filters, or any numeric input presented as a slider. Instances of `Range` are not created directly by library consumers. Instead, calling the Taiko API function `range()` returns an `ElementWrapper` that internally constructs `Range` instances via the static `Range.from(element, description)` factory method.
Code Reference
Source Location
- Repository: Getgauge_Taiko
- File: lib/elements/range.js
- Lines: 1-108
Signature
class Range extends Element {
async select(value) { ... }
async value() { ... }
static from(element, description) { ... }
}
// Internal helpers (defined within select method scope)
function getRange() {
// Returns { min, max } from element attributes (defaults: 0, 100)
}
function setRange(value) {
// Sets value via native setter, dispatches change/input events,
// returns { min, max, current }
}
Import
// Internal class, accessed through Taiko API
const { range } = require('taiko');
// Returns ElementWrapper that creates Range instances internally
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| value | number | Yes (for `select`) | The numeric value to set the range slider to. Must be a valid number. If outside the min/max bounds, a warning is logged and the browser clamps the value. |
| element | Element | Yes (for `from`) | Base Element instance to convert into a Range element |
| description | string | Yes (for `from`) | Human-readable description used in event logging |
Outputs
| Name | Type | Description |
|---|---|---|
| select() | Promise<void> | Validates the value, retrieves min/max bounds, sets the range via native setter, dispatches change/input events. Throws an Error if the value is not a valid number. Warns if out of bounds. |
| value() | Promise<string> | Returns the current value of the range slider element. |
| from() | Range | Static factory that constructs a new Range from an existing Element instance. |
Usage Examples
Basic Usage
const { openBrowser, goto, range, closeBrowser } = require('taiko');
(async () => {
await openBrowser();
await goto('https://example.com/settings');
// Set the volume slider to 75
await range('Volume').select(75);
// Retrieve the current slider value
const currentValue = await range('Volume').value();
console.log('Current volume:', currentValue); // "75"
// Set to minimum value
await range('Volume').select(0);
await closeBrowser();
})();