A dual-handle range slider where the selected span renders as a single taut SVG band that visibly leans under drag velocity while the far handle stays planted, then springs back flat on release.
"use client";
import ShearBand from "@/components/ui/slider-range-shear";
import { useMemo, useState } from "react";
const LISTINGS = [
{ name: "Loft studio, Ravenscourt", price: 890 },
{ name: "Two-bed maisonette, Peckham", price: 1450 },
{ name: "Garden flat, Herne Hill", price: 1680 },
{ name: "One-bed, Walthamstow", price: 1180 },
{ name: "Studio above a bakery, Dalston", price: 990 },
{ name: "Two-bed, Tooting", price: 1720 },
{ name: "Ex-council flat, Deptford", price: 1050 },
{ name: "One-bed, Finsbury Park", price: 1390 },
{ name: "Riverside studio, Wapping", price: 1950 },
{ name: "Room in a house share, Brixton", price: 720 },
];
export default function ShearBandDemo() {
const [range, setRange] = useState<[number, number]>([800, 1800]);
const filtered = useMemo(
() => LISTINGS.filter((l) => l.price >= range[0] && l.price <= range[1]),
[range],
);
return (
<div className="w-full max-w-md rounded-lg border border-border bg-card p-6 space-y-6 text-card-foreground">
<div className="flex items-start justify-between">
<div>
<div className="text-sm font-medium">Filter listings</div>
<div className="text-xs text-muted-foreground">
Monthly rent, London
</div>
</div>
<span className="rounded-full border border-border px-2 py-0.5 text-xs tabular-nums text-muted-foreground">
{filtered.length} of {LISTINGS.length}
</span>
</div>
<ShearBand
min={0}
max={2200}
step={10}
value={range}
onValueChange={setRange}
formatValue={(v) => `£${v}`}
minLabel="Minimum rent"
maxLabel="Maximum rent"
/>
<div className="divide-y divide-border">
{filtered.map((l) => (
<div
key={l.name}
className="flex items-center justify-between py-2 text-sm"
>
<span>{l.name}</span>
<span className="tabular-nums text-muted-foreground">
£{l.price}/mo
</span>
</div>
))}
{filtered.length === 0 && (
<div className="py-2 text-sm text-muted-foreground">
No listings in range
</div>
)}
</div>
<p className="text-xs italic text-muted-foreground">
drag a grip fast — the band leans with it, then snaps flat
</p>
</div>
);
}