Skip to main content
The RangeInput component provides a beautifully styled range slider with a filled track, draggable handle, hover tooltip, and optional tick marks.

​
Import

import { RangeInput, RangeInputRaw } from '@luminescent/ui-qwik';

​
Usage

<RangeInput
  id="volume"
  value={volume.value}
  min={0}
  max={100}
  onInput$={(e, input) => {
    volume.value = parseInt(input.value);
  }}
>
  Volume
</RangeInput>

​
RangeInput Props

​
id
string
required
HTML id for the input field and label association.
​
value
number
The current value. Defaults to min if not provided.
​
min
number
default:"0"
Minimum value of the range.
​
max
number
default:"10"
Maximum value of the range.
​
onInput$
QRL<(event, element) => void>
Callback fired when the value changes. Receives the input event and the input element.
​
class
{ [key: string]: boolean }
Object-based class names for conditional styling.
​
...props
PropsOf<'input'>
All standard HTML input attributes are supported (except type and standard class).

​
Examples

<RangeInput
  id="opacity"
  value={opacity.value}
  min={0}
  max={1}
  onInput$={(e, input) => {
    opacity.value = parseFloat(input.value);
  }}
>
  Opacity
</RangeInput>

​
Behavior

The component displays tick marks between min and max values (excluding endpoints). A tooltip showing the current value appears above the handle on hover. The filled portion of the track updates in real-time as you drag.

​
Visual Features

  • Filled Track: The track fills from left to right based on current value percentage
  • Tick Marks: Subtle vertical lines indicate step positions (if more than 2 values)
  • Draggable Handle: Circular handle with accent color
  • Hover Tooltip: Current value displays above handle on hover
  • Touch Support: Full touch event support with touch-manipulation

​
Styling

  • The actual range input is invisible (opacity-0) but remains interactive
  • Custom track and handle styled with Luminescent UI design tokens
  • Smooth transitions on hover with transition-all
  • Handle positioned absolutely and translates based on value percentage
  • Tooltip appears with smooth opacity transition

​
Accessibility

  • Native <input type="range"> provides keyboard support (arrow keys)
  • Label is associated with input via for attribute
  • The range input remains focusable despite custom styling
  • select-none on label prevents text selection during drag

Build docs developers (and LLMs) love

Get started for freeTalk to us