Range — lunaDOM Docs

The <luna-range> component provides a slider input with live tooltip, progress glow, and extensive customization.

Paths

/lunadom/components/range/range.js

REQUIRED

/lunadom/components/tooltip/tooltip.js

Basic Usage

Fractional Steps

Tooltip Placement

No Tooltip

No Glow Effect

Custom Colors

Custom Range

Disabled State

Overrides

Attributes
min - Minimum value (default: 0)
max - Maximum value (default: 100)
step - Increment step (default: 1)
value - Current value (default: 0)
disabled - Disables the input
label - Label displayed above the slider
help-text - Help text displayed below the slider
tooltip-placement - Tooltip position (top, bottom)
no-tooltip - Hides the value tooltip
no-glow - Disables progress fill glow

CSS Variables
--luna-range-track - Track background colour (default: #1a1a1a)
--luna-range-track-border - Track border colour (default: #333)
--luna-range-track-height - Track height (default: 4px)
--luna-range-track-active - Filled progress colour (default: var(--luna-accent, #2563eb))
--luna-range-glow-color - Glow / shadow colour for the progress fill. (default: a 40%-alpha version of --luna-range-track-active)
--luna-range-thumb-bg - Thumb background colour (default: #fff)
--luna-range-thumb-size - Thumb diameter (default: 18px)
--luna-range-thumb-ring - Colour of the thumb focus ring (default: rgba(0,0,0,.3))
--luna-range-label-color - Label text colour (default: #ccc)
--luna-range-label-size - Label font size (default: 0.875rem)
--luna-range-helptext-color - Help text colour (default: #666)
--luna-range-helptext-size - Help text font size (default: 0.75rem)

Events
luna-input - Emitted continuously while dragging
luna-change - Emitted when the value is committed

Example Code

<luna-range label="Volume" min="0" max="100" value="50" help-text="Adjust the system volume" ></luna-range>  <luna-range label="Rating" min="0" max="10" step="0.5" value="7.5" ></luna-range>  <luna-range value="65" tooltip-placement="bottom" ></luna-range>  <luna-range value="40" no-tooltip ></luna-range>  <luna-range value="60" no-glow ></luna-range>  <luna-range value="75" style=" --luna-range-track-active: #ef4444; --luna-range-glow-color: rgba(239, 68, 68, 0.5); " ></luna-range>  <luna-range id="my-range" value="50"></luna-range> <script> const range = document.getElementById('my-range'); // Fires while dragging range.addEventListener('luna-input', (e) => { console.log('Input:', e.detail.value); }); // Fires on commit range.addEventListener('luna-change', (e) => { console.log('Changed:', e.detail.value); }); </script>