Slider

import { Slider } from "@fanvue/ui";
import type { SliderLabelPosition, SliderProps } from "@fanvue/ui";

import { Slider } from "@fanvue/ui";

<Slider
  defaultValue={[50]}
  label="Label"
  minLabel="Min Value"
  maxLabel="Max Value"
/>

import { Slider } from "@fanvue/ui";

<Slider
  defaultValue={[50]}
  label="Disabled Slider"
  minLabel="Min"
  maxLabel="Max"
  disabled
/>

import { Slider } from "@fanvue/ui";

<Slider defaultValue={[50]} />

import { Slider } from "@fanvue/ui";

<div className="flex w-[360px] flex-col gap-8">
  <Slider
    defaultValue={[40]}
    label="Label top"
    labelPosition="top"
    minLabel="0"
    maxLabel="100"
  />
  <Slider
    defaultValue={[40]}
    label="Label left"
    labelPosition="left"
    minLabel="0"
    maxLabel="100"
  />
  <Slider defaultValue={[60]} label="Label left, no min/max" labelPosition="left" />
  <Slider defaultValue={[30]} minLabel="Low" maxLabel="High" />
  <Slider defaultValue={[50]} />
  <Slider defaultValue={[20, 80]} label="Range" minLabel="$0" maxLabel="$1000" />
  <Slider defaultValue={[50]} label="Disabled" minLabel="Min" maxLabel="Max" disabled />
</div>

import { Slider } from "@fanvue/ui";

<Slider
  defaultValue={[20, 80]}
  label="Price Range"
  minLabel="$0"
  maxLabel="$1000"
/>