Documentation
Basic
Extended
Blocks

Form range

This range input is created from <input type="range">. It used native <input type="range"> element. You need to use JavaScript to update the value.

--r-form-range-value is set to 50% as value is 5

<input type="range" name="range" min="0" max="10" value="5" class="form-range" id="js-range-input" />
Sample JS code
const rangeEl = document.getElementById('js-range-input');

rangeEl.addEventListener('input', () => {
    const value = ((rangeEl.value - rangeEl.min) / (rangeEl.max - rangeEl.min)) * 100;

    rangeEl.style.setProperty('--r-form-range-value', `${value}%`);
});
SASS reference
$range-size: rem(6) !default;
    
--r-form-range-height: #{$range-size};
--r-form-range-track-color: var(--r-color-light-darken-5);
--r-form-range-thumb-color: var(--r-color-primary);
--r-form-range-thumb-hover-color: color-mix(in srgb, var(--r-color-primary), black 10%);
--r-form-range-border-radius: var(--r-global-border-radius);
--r-form-range-thumb-size: calc(var(--r-form-range-height) * 3);
--r-form-range-value: 50%;