Range

Range Component

The Range component is a styled slider input that lets users select a numeric value within a defined range. It supports labels, hints, tooltips, validation messages, and optional display of the current value.

Example Usage

<x-range
    tooltip="Adjust the volume"
    label="Volume"
    min="0"
    max="100"
    step="2"
    current="50"
    showValue="true"
    showRequired="true"
    showValidation="true" />

Props

• current (int, default: 0)
  The initial value of the slider.

• min (int, default: 0)
  Minimum allowed value.

• max (int, default: 100)
  Maximum allowed value.

• step (int, default: 1)
  Increment step between values.

• label (string|null)
  Text label displayed above the slider.

• hint (string|null)
  Helper text displayed below the slider.

• uuid (string|null)
  Unique identifier for the slider input; autogenerated if not provided.

• tooltip (string|null)
  Tooltip text shown when hovering over the slider.

• showValue (bool, default: false)
  Whether to display the current slider value next to the input.

• showRequired (bool, default: false)
  Show an asterisk (*) if the slider is marked as required.

• showValidation (bool, default: false)
  Display validation error messages if present.

Overview

This Range component provides an accessible and visually enhanced slider input styled with Tailwind CSS. It supports dark mode and offers flexible features like tooltips, validation feedback, and live display of the current value. The component auto-generates unique IDs to ensure proper label association.