Price-range filter

A two-thumb Slider for selecting a bounded range — the canonical price/value filter, with both ends echoed in a live readout.

Slider

Preview

Price$25 – $75

Source

apps/docs/app/recipes/slider-range/recipe.tsx

'use client';

import { useState } from 'react';
import { Slider } from '@hey-mike/tungsten';

export default function SliderRangeRecipe() {
  const [range, setRange] = useState<[number, number]>([25, 75]);
  return (
    <div className="w-72">
      <div className="mb-2 flex items-baseline justify-between">
        <span className="text-ink-1 text-sm font-medium">Price</span>
        <span className="text-ink-2 text-sm tabular-nums">
          ${range[0]} – ${range[1]}
        </span>
      </div>
      <Slider
        label="Price"
        value={range}
        min={0}
        max={100}
        onValueChange={(v) => setRange(v as [number, number])}
      />
    </div>
  );
}

'use client';

import { useState } from 'react';
import { Slider } from '@hey-mike/tungsten';

export default function SliderRangeRecipe() {
  const [range, setRange] = useState<[number, number]>([25, 75]);
  return (
    <div className="w-72">
      <div className="mb-2 flex items-baseline justify-between">
        <span className="text-ink-1 text-sm font-medium">Price</span>
        <span className="text-ink-2 text-sm tabular-nums">
          ${range[0]} – ${range[1]}
        </span>
      </div>
      <Slider
        label="Price"
        value={range}
        min={0}
        max={100}
        onValueChange={(v) => setRange(v as [number, number])}
      />
    </div>
  );
}