Slider

import { Slider } from 'topclassui/slider'

/** Outside a Field: the slider is named by the visible text above it. Drag the thumb, press the track, or use the arrows. */
export default function Demo() {
  return (
    <div className="grid justify-items-start gap-2">
      <span id="slider-basic-label" className="text-sm text-body">Volume</span>
      <Slider aria-labelledby="slider-basic-label" defaultValue={60} step={5} />
    </div>
  )
}

import { Slider } from 'topclassui/slider'

/** A pair gives two thumbs, named Minimum and Maximum, that cannot cross. The form receives the name twice. */
export default function Demo() {
  return (
    <div className="grid justify-items-start gap-2">
      <span id="slider-range-label" className="text-sm text-body">Price</span>
      <Slider aria-labelledby="slider-range-label" name="price" defaultValue={[20, 80]} step={5} />
    </div>
  )
}

import { Slider } from 'topclassui/slider'

/** showValue writes the value after the track, in the provider's digits; format shapes it, here as dollars. */
export default function Demo() {
  return (
    <div className="grid justify-items-start gap-4">
      <Slider aria-label="Brightness" defaultValue={40} showValue />
      <Slider
        aria-label="Budget"
        defaultValue={[200, 800]}
        min={0}
        max={1000}
        step={50}
        format={{ style: 'currency', currency: 'USD', maximumFractionDigits: 0 }}
        showValue
      />
    </div>
  )
}

import { Button } from 'topclassui/button'
import { Slider } from 'topclassui/slider'

/** The slider carries the name and the default: it sends volume=60, before any script runs and after. */
export default function Demo() {
  return (
    <form className="grid justify-items-start gap-3">
      <span id="slider-form-label" className="text-sm text-body">Volume</span>
      <Slider aria-labelledby="slider-form-label" name="volume" defaultValue={60} step={5} />
      <Button type="submit">Save</Button>
    </form>
  )
}

import { Slider } from 'topclassui/slider'

/** The five sizes. Each is as wide as an Input of its size, and each thumb stays 24 px, and 44 px under a finger. */
export default function Demo() {
  return (
    <div className="grid justify-items-start gap-4">
      <Slider size="xs" aria-label="Extra small" defaultValue={20} />
      <Slider size="sm" aria-label="Small" defaultValue={40} />
      <Slider size="md" aria-label="Medium" defaultValue={50} />
      <Slider size="lg" aria-label="Large" defaultValue={60} />
      <Slider size="xl" aria-label="Extra large" defaultValue={80} />
    </div>
  )
}

import { TopClassProvider } from 'topclassui/provider'
import { Slider } from 'topclassui/slider'

/** Arabic, inside TopClassProvider as the root layout would mount it. The track runs from right to left: 30 sits 30%
 * in from the right, ArrowLeft raises the value, and the two thumbs of the range are named in Arabic. */
export default function Demo() {
  return (
    <TopClassProvider direction="rtl" locale="ar">
      <div dir="rtl" lang="ar" className="grid justify-items-start gap-3">
        <span id="slider-rtl-volume" className="text-sm text-body">مستوى الصوت</span>
        <Slider aria-labelledby="slider-rtl-volume" name="volume" defaultValue={30} showValue />
        <span id="slider-rtl-price" className="text-sm text-body">نطاق السعر</span>
        <Slider aria-labelledby="slider-rtl-price" name="price" defaultValue={[20, 80]} />
      </div>
    </TopClassProvider>
  )
}