Slider

Code

import { Slider } from "@fadymondy/nasaq/web";export function Volume() {  return <Slider label="Volume" defaultValue={40} />;}

Forms · beta

Live examples and controls: Slider in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/slider.json

Picks a number, or a range of two numbers, by dragging a thumb along a track. Pass a number for one thumb or an array for a range. The value label uses Nasaq number formatting (Western digits in Arabic too). Built on Base UI Slider.

When to useCopy Anchor Link

• Choosing an approximate value on a scale: volume, quality, a price range filter.
• A range where dragging is faster than typing two numbers.

When not to useCopy Anchor Link

• An exact figure the user must type: use an Input.
• Showing a value the user cannot change: use Progress or Meter.
• Two to five named options: use ToggleGroup or RadioGroup.

ImportCopy Anchor Link

import { Slider } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

import { Slider } from "@fadymondy/nasaq/web";

export function Volume() {
  return <Slider label="Volume" defaultValue={40} />;
}

AnatomyCopy Anchor Link

<Slider>                      data-slot="slider"
├─ slider-head                label + value row
│  └─ slider-value            formatted value(s)
├─ slider-control             data-slot="slider-control"
│  └─ slider-track
│     ├─ slider-range         the filled part
│     └─ slider-thumb         one per value
└─ slider-marks               optional ticks, aria-hidden

APICopy Anchor Link

Slider (SliderProps)Copy Anchor Link

All Base UI Slider.Root props except orientation, format and children, plus:

SliderMark: { value: number; label?: ReactNode }.

ExamplesCopy Anchor Link

Price range in Arabic:

import { Slider } from "@fadymondy/nasaq/web";

export function PriceAr() {
  return (
    <Slider
      label="نطاق السعر"
      min={0}
      max={10000}
      step={100}
      defaultValue={[1200, 8500]}
      format={{ style: "currency", currency: "SAR", maximumFractionDigits: 0 }}
      thumbLabels={["الحد الأدنى", "الحد الأقصى"]}
    />
  );
}

Inside a Field:

import { Field, FieldDescription, FieldLabel, Slider } from "@fadymondy/nasaq/web";

export function Seats() {
  return (
    <Field name="seats">
      <FieldLabel>Seats</FieldLabel>
      <Slider aria-label="Seats" defaultValue={10} min={1} max={50} showValue />
      <FieldDescription>You can change this later.</FieldDescription>
    </Field>
  );
}

AccessibilityCopy Anchor Link

• Each thumb is an input type="range". Name it with label, aria-label or thumbLabels and localise those.
• Marks are decorative (aria-hidden); the value is spoken through aria-valuetext.

RTL & i18nCopy Anchor Link

The fill starts at the inline start, so in RTL it grows from the right and arrow keys follow the direction (from the NasaqProvider direction). Marks are placed with inset-inline-start. Values are formatted with Western digits in every locale.

Styling & tokensCopy Anchor Link

bg-nq-surface-soft track, bg-primary range, bg-card thumb with border-primary, focus ring nq-focus. State attributes: data-disabled, data-dragging. className merges onto the root.

Do / Don'tCopy Anchor Link

• Do show the value; a bare slider is imprecise.
• Don't use it for values that need exactness.

RelatedCopy Anchor Link

progress, field, numeric.

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-forms-slider--docs