Slider Control

Default

A slider with a label and formatted value display.

Decimal Step

Use fractional steps for fine-grained control.

Installation

npx visor add slider-control

This copies two files into your project:

• components/ui/slider-control/slider-control.tsx — the component
• components/ui/slider-control/slider-control.module.css — the styles

Usage

import { SliderControl } from '@/components/ui/slider-control/slider-control';

const [scale, setScale] = useState(1.0);

<SliderControl
  label="Size"
  value={scale}
  onValueChange={setScale}
  displayValue={scale.toFixed(1)}
  min={0.2}
  max={3.0}
  step={0.05}
/>

API Reference

SliderControlProps

No props data available for “slider-control”.

The component also accepts all standard <div> HTML attributes.

Accessibility

• Composes the Slider primitive which uses role="slider" with aria-valuemin, aria-valuemax, and aria-valuenow.
• The label is associated with the slider for screen reader announcements.
• Keyboard: ArrowLeft / ArrowRight adjust the value by step; Home / End jump to min/max.