Slider

Tier: clientUnstable

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { Slider } from '@nizivo/react/unstable/slider';

export function SliderExample(): JSX.Element {
  return (
    <div style={{ display: 'grid', gap: 24, inlineSize: 320 }}>
      <Slider label="Discount" defaultValue={30} format={{ style: 'unit', unit: 'percent' }} />
      <Slider label="Volume" defaultValue={70} disabled />
    </div>
  );
}

ImportCopy Anchor Link

import { Slider } from '@nizivo/react/unstable/slider';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/slider.css';

Static or interactiveCopy Anchor Link

Client. It holds the value; the input is the browser's own <input type="range">, so its role, keys (the arrows step, Page Up and Page Down jump, Home and End go to the ends) and form submission are native. How to choose.

ValueCopy Anchor Link

value, defaultValue and onValueChange hold the number; min, max and step set the range, and keyStep makes the arrow keys move further than one step (a media scrubber steps 1 second and seeks 5). The value is always written out above the track: format (Intl number options) or valueText (a function) gives the words, which a screen reader hears as aria-valuetext ("30%"). label names it, or aria-label when there is no visible name.

FillCopy Anchor Link

The fill is drawn from a custom property set when the slider hydrates (no style attribute, so it works under a strict CSP); Firefox draws its own. Before hydration the track shows no fill.

PropsCopy Anchor Link

Other exportsCopy Anchor Link

SliderProps type

import type { SliderProps } from '@nizivo/react/unstable/slider'

The props of Slider, listed above.

SliderState type

import type { SliderState } from '@nizivo/react/unstable/slider'

The render state of Slider, listed above.

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

This stylesheet reads no public hook.

Layers: nz.components. Classes: .nz-slider, .nz-slider-input, .nz-slider-label, .nz-slider-top, .nz-slider-value.

AccessibilityCopy Anchor Link

These parts are interactive. Each gets the focus outline and touch-action rule from @nizivo/react/css/base.css (the nz.base layer), so the floor survives a restyle:

• slider-input: draws the focus outline itself on keyboard focus.

KeyboardCopy Anchor Link

To be written.