One value, a range and disabled

// apps/docs/examples/ui/slider.tsx'use client';
import {useState} from 'react';
import {  Field,  FieldDescription,  FieldLabel,} from '@workspace/active-ui/components/primitives/field';import {Slider} from '@workspace/active-ui/components/primitives/slider';
/** * A value picked on a scale: one thumb, a range with two thumbs and a step, * and a disabled slider. The value is an array, one number per thumb; the * current value is shown as text, because a slider alone does not tell the * reader the exact number. */export default function SliderExample() {  const [share, setShare] = useState([40]);  const [range, setRange] = useState([25, 65]);  return (    <div className="grid w-full max-w-md gap-8">      <Field>        <FieldLabel id="slider-share-label">Equity share</FieldLabel>        <Slider          value={share}          onValueChange={(value) => setShare(value as number[])}          aria-labelledby="slider-share-label"        />        <FieldDescription>{share[0]}% of the contributions</FieldDescription>      </Field>      <Field>        <FieldLabel id="slider-age-label">Age range</FieldLabel>        <Slider          value={range}          min={18}          max={67}          step={1}          onValueChange={(value) => setRange(value as number[])}          aria-labelledby="slider-age-label"        />        <FieldDescription>          From {range[0]} to {range[1]} years        </FieldDescription>      </Field>      {/* The label keeps full contrast: it names a control that is not          associated with it by `for`, so it is not exempt as disabled text. */}      <Field>        <FieldLabel id="slider-fixed-label">Employer share (fixed)</FieldLabel>        <Slider          defaultValue={[50]}          disabled          aria-labelledby="slider-fixed-label"        />      </Field>    </div>  );}