Slider

import { Slider, RangeSlider } from "@raydenui/ui";

<Slider />

const [value, setValue] = useState(50);
 
<Slider value={value} onChange={setValue} />

<Slider size="sm" />
<Slider size="md" />
<Slider size="lg" />

<Slider label="Volume" />

<Slider
  label="Download Speed"
  metadata="50 MB/s"
/>
 
<Slider
  label="Connection"
  metadata={["5G", "Low latency", "Stable"]}
/>

<Slider showPercentage={false} />

<Slider min={0} max={1000} step={10} />

<Slider disabled value={30} />

<RangeSlider />

const [range, setRange] = useState<[number, number]>([25, 75]);
 
<RangeSlider value={range} onChange={setRange} />

<RangeSlider label="Price Range" />

<RangeSlider showLabels={false} />

<RangeSlider
  min={0}
  max={1000}
  step={50}
  label="Budget ($)"
/>

// Price filter
<div className="space-y-4">
  <h3>Filter by Price</h3>
  <RangeSlider
    value={priceRange}
    onChange={setPriceRange}
    min={0}
    max={500}
    label="Price Range"
  />
  <p className="text-sm text-grey-500">
    ${priceRange[0]} - ${priceRange[1]}
  </p>
</div>
 
// Audio equalizer
<div className="space-y-2">
  <Slider label="Bass" value={bass} onChange={setBass} />
  <Slider label="Mid" value={mid} onChange={setMid} />
  <Slider label="Treble" value={treble} onChange={setTreble} />
</div>