Skip to main content
components

Slider

A range input component to select values by sliding.

Package@g4rcez/componentsSectionForm Controls

Examples

Basic Range Slider

A slider with two thumbs allowing selection of a range between a minimum and maximum value.

tsx
"use client";
import { Slider } from "@g4rcez/components";

function BasicRangeSlider() {
  return (
    <Slider defaultValue={[50, 75]} min={1} max={100} />
  );
}

When to use Slider

Use when

You need the documented Slider interaction or presentation in a product workflow.

Avoid when

A native HTML element already provides the Slider behavior you need.

Accessibility

Keep the Slider labeled and use its documented keyboard interaction. The component preserves visible focus and communicates state without relying on color alone.

  • Keep keyboard focus visible and follow the documented key commands.
  • Provide an accessible name and connect descriptions or errors to the control.