Shear Band Range Slider

Forms

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Shear Band Range Slider to your project and fits it to your theme.

Code

How Shear Band Range Slider is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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>
  );
}