Slider
fw-slider
A draggable slider widget for selecting numeric values within a range. Provides a consistent, styled alternative to the native range input with tooltip support.
Usage
HTML (Auto-init)
Add the fw-slider class to a native <input type="range"> element. The widget will hide the native input and render the custom UI.
HTML
<input type="range" class="fw-slider" min="0" max="100" value="50">
<script>
FormWidgets.autoInit();
</script>JavaScript Initialization
JavaScript
FormWidgets.init('#myRange', 'Slider', {
min: 0,
max: 100,
step: 5,
showTooltip: true
});Options
| Option | Type | Default | Description |
|---|---|---|---|
| min | number | 0 | Minimum value of the slider. |
| max | number | 100 | Maximum value of the slider. |
| step | number | 1 | Increment step for value changes. |
| value | number | 0 | Initial value. |
| showTooltip | boolean | true | Whether to show a tooltip with the current value while dragging or hovering. |
Data Attributes
When using a native input type="range", the widget automatically inherits min, max, step, and value attributes.
| Data Attribute | Equivalent Option | Example |
|---|---|---|
| data-show-tooltip | showTooltip | data-show-tooltip="false" |
Methods
widget.setValue(value)
Sets the slider value programmatically and updates the UI.
Parameter:
value (number)Keyboard Navigation
→ / ↑Increment value by step
← / ↓Decrement value by step
HomeSet to minimum value
EndSet to maximum value
Features
Touch Friendly
Works seamlessly on touch devices with smooth dragging.
Value Tooltip
Shows the exact value on hover, focus, or drag.
Accessible
Full ARIA support and keyboard navigation.