Range row

An amount: the label, the slider and its value.

kit.rangeRow()
463 B of CSS · 14 rules
kit.css
No script needed

Use it

On your server

const kit = require('openvibe-shared/kit');

const html = '<form class="ovk-form">'
    + kit.rangeRow({ name: 'volume', label: 'Alert volume', value: 60 })
    + '</form>';

In a page that draws itself

<link rel="stylesheet" href="https://openvibe.network/shared/kit.css">
<script src="https://openvibe.network/shared/kit.js"></script>

<script>
  const box = document.querySelector('#here');
  box.innerHTML = '<form class="ovk-form">'
      + OpenVibeKit.rangeRow({ name: 'volume', label: 'Alert volume', value: 60 })
      + '</form>';
  OpenVibeKit.enhance(box);
</script>

The HTML it returns · 243 B

<form class="ovk-form"><label class="ovk-set-row ovk-set-range"><span class="ovk-set-text">Alert volume</span><input type="range" name="volume" min="0" max="100" step="5" value="60" data-ovk-unit="%" aria-valuetext="60 percent"></label></form>

What it weighs

Its own rules are 1.6 KB, 463 B as sent: 3% of the kit's CSS. A page that draws it pays for the whole stylesheet once, and every other part comes free.