useRangeSlider

function useRangeSlider(
  options?: RangeSliderOptions
): RangeSliderImplementation;

const slider = useRangeSlider();
const { rangeValue, min, max, step, setRangeValue } = slider;
const [minPrice, maxPrice] = rangeValue;

return <Slider aria-label="Example" {...slider} />;

export interface SliderValueOptions {
  /**
   * The min value for the slider.
   *
   * @defaultValue `0`
   */
  min?: number;

  /**
   * The max value for the slider.
   *
   * @defaultValue `100`
   */
  max?: number;

  /**
   * A positive number representing the value to "jump" while incrementing or
   * decrementing the slider's value. This should normally stay as the default
   * value of `1`, but can also be decimal values if needed.
   *
   * @defaultValue `1`
   */
  step?: number;
}

export type RangeSliderValue = readonly [minValue: number, maxValue: number];

export interface RangeSliderOptions extends SliderValueOptions {
  /** @defaultValue `[min, max]` */
  defaultValue?: UseStateInitializer<RangeSliderValue>;
}

export interface RangeSliderState {
  rangeValue: RangeSliderValue;
  setRangeValue: UseStateSetter<RangeSliderValue>;
}

export interface RangeSliderImplementation
  extends Required<SliderValueOptions>,
    RangeSliderState {}