Slider

npx shadcn@latest add https://ui.saasflare.io/r/slider.json

pnpm add @saasflare/ui

"use client"import { Slider } from "@saasflare/ui"/** A single-thumb slider for a percentage value. */export function Demo() {    return (        <div className="w-full max-w-sm">            <Slider defaultValue={[40]} max={100} step={1} />        </div>    )}

"use client"import { useState } from "react"import { Label, Slider } from "@saasflare/ui"/** A controlled slider that displays its current value. */export function Demo() {    const [value, setValue] = useState([8])    return (        <div className="flex flex-col gap-3 w-full max-w-sm">            <div className="flex items-center justify-between">                <Label>Concurrent builds</Label>                <span className="text-sm tabular-nums text-muted-foreground">{value[0]}</span>            </div>            <Slider value={value} onValueChange={setValue} min={1} max={16} step={1} />        </div>    )}

"use client"import { useState } from "react"import { Label, Slider } from "@saasflare/ui"/** A two-thumb slider expressing a price range. */export function Demo() {    const [range, setRange] = useState([20, 80])    return (        <div className="flex flex-col gap-3 w-full max-w-sm">            <div className="flex items-center justify-between">                <Label>Price range</Label>                <span className="text-sm tabular-nums text-muted-foreground">                    ${range[0]} – ${range[1]}                </span>            </div>            <Slider value={range} onValueChange={setRange} max={100} step={5} />        </div>    )}