Function useRange

Example

General usage with useRange:

import { useRange } from "./useRange";
import { useState } from "react";

const Component = ({ facetId }) => {
  const { min, max, range, updateRange } = useRange(facetId);

  return (
    <div>
      Current Range: {range[0]} to {range[1]}
      <button onClick={() => updateRange([min, max])}>Reset Range</button>
    </div>
  );
};
Copy

Usage with useRangeSlider for slider components (backward compatibility):

import { RangeSlider, useRangeSlider } from "@nosto/preact"
import { useState } from "preact/hooks"
import RangeInput from "./elements/RangeInput"

const RangeFacet = ({ facet }) => {
  const { min, max, range, updateRange } = useRangeSlider(facet.id);

  return (
    <li>
      <div>
        <div>
          <label>Min.</label>
          <RangeInput
            min={min}
            max={max}
            value={range[0]}
            onChange={e => updateRange([parseFloat(e.currentTarget.value) || undefined, range[1]])}
          />
          <label>Max.</label>
          <RangeInput
            min={min}
            max={max}
            value={range[1]}
            onChange={e => updateRange([range[0], parseFloat(e.currentTarget.value) || undefined])}
          />
        </div>
        <RangeSlider id={facet.id} />
      </div>
    </li>
  );
};
Copy