Slider

"use client"

import * as React from "react"

import { Slider } from "@/components/ui/slider"

export default function SliderRange() {
  const [value, setValue] = React.useState([22, 68])

  return (
    <div className="flex w-full max-w-64 flex-col gap-2">
      <Slider value={value} onValueChange={setValue} aria-label="Price range" />
      <div className="flex justify-between text-mac-subheadline text-mac-label-secondary tabular-nums">
        <span>{value[0]} €</span>
        <span>{value[1]} €</span>
      </div>
    </div>
  )
}

"use client"

import { Slider } from "@/components/ui/slider"

// The slider style of System Settings › Desktop & Dock.
export default function SliderTicks() {
  return (
    <div className="flex w-56 flex-col">
      <span className="text-mac-body">Size</span>
      <Slider defaultValue={[30]} aria-label="Dock size" />
      <div className="relative mt-px flex justify-between px-[10px]">
        <span className="h-0.5 w-px bg-mac-label-tertiary" />
        <span className="h-0.5 w-px bg-mac-label-tertiary" />
      </div>
      <div className="flex justify-between text-mac-footnote font-medium">
        <span>Small</span>
        <span>Large</span>
      </div>
    </div>
  )
}