Range Slider

Range Slider component documentation for Velyx. Installation, usage examples, single and double handles, and customization guidance for Laravel Blade, Alpine.js, Livewire, and Tailwind CSS v4.

Range Slider

Range sliders let users adjust numeric values quickly with direct manipulation instead of typing.

Installation

Add the range slider component to your project:

npx velyx@latest add range-slider
pnpm dlx velyx@latest add range-slider
yarn dlx velyx@latest add range-slider
bunx --bun velyx@latest add range-slider

Alpine.js Required: The range slider component uses Alpine.js to manage current values and dual-handle behavior.

Usage

Single Value

Range Slider

Live preview rendered from the registry in an isolated iframe.

Open preview

Loading preview...

Failed to load preview

Code

Range Slider

Full preview from the registry iframe.

Open in tab

Loading preview...

Double Handle

Range Slider

Live preview rendered from the registry in an isolated iframe.

Open preview

Loading preview...

Failed to load preview

Code

Range Slider

Full preview from the registry iframe.

Open in tab

Loading preview...

Compact Size

Range Slider

Live preview rendered from the registry in an isolated iframe.

Open preview

Loading preview...

Failed to load preview

Code

Range Slider

Full preview from the registry iframe.

Open in tab

Loading preview...

Without Labels

Range Slider

Live preview rendered from the registry in an isolated iframe.

Open preview

Loading preview...

Failed to load preview

Code

Range Slider

Full preview from the registry iframe.

Open in tab

Loading preview...

Props

Prop Type Default Description
min int | float 0 Minimum slider value
max int | float 100 Maximum slider value
step int | float 1 Value increment
showValue bool true Displays the current value above the track
showLabels bool true Displays the min and max labels below the track
size string 'md' Slider size: sm, md, or lg
variant string 'default' Track accent color variant
type string 'single' Slider mode: single or double

Example Structure

<x-ui.range-slider
    type="double"
    :min="0"
    :max="100"
    :step="5"
    variant="primary"
/>

Accessibility

  • Uses native input[type=range] elements under the custom UI
  • Keeps keyboard support from the browser range input
  • Works well for thresholds, filters, and preference ranges

Next Steps