The identifier for the specific range facet.
An object containing range information and functions to update the range.
Max value
Min value
Range value
Update range function
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>
);
};
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>
);
};
A hook that returns range information and functions to update the range.
useRangeSlideris an alias ofuseRange, maintained for backward compatibility with older implementations that uses sliders.