FormWidgets / Slider / Examples

Slider Examples

Live examples of the Slider widget showing different ranges, steps, and configurations.

View Documentation

1. Basic Slider

Standard slider from 0 to 100.

HTML
<input type="range" class="fw-slider" min="0" max="100" value="50">

2. Custom Range and Step

Slider from 0 to 10 with a step of 0.5.

HTML
<input type="range" class="fw-slider" min="0" max="10" step="0.5" value="7.5">

3. JavaScript Initialization

Initialize on a container div without a native input.

JavaScript
FormWidgets.init('#js-slider', 'Slider', {
    min: 0,
    max: 200,
    value: 100
});

4. Live Value Update

Listen to the input event to get real-time updates.

JavaScript
document.getElementById('price-slider').addEventListener('input', (e) => {
    document.getElementById('price-val').textContent = '$' + e.target.value;
});