@sharifulislamafsar/multi-range-slider/dist/index.esm.js

A customizable multi-range slider component for React and NextJs.

import React, { useState, useEffect } from 'react';

const MultiRangeSlider = ({
  minPrice = 0,
  maxPrice = 400,
  onChange
}) => {
  const [minRange, setMinRange] = useState(minPrice);
  const [maxRange, setMaxRange] = useState(maxPrice);
  const minGap = 10;
  const updateRange = e => {
    const {
      name,
      value
    } = e.target;
    const numValue = parseInt(value);
    if (name === "min" && maxRange - numValue >= minGap) {
      setMinRange(numValue);
    } else if (name === "max" && numValue - minRange >= minGap) {
      setMaxRange(numValue);
    }
  };
  useEffect(() => {
    if (onChange) {
      onChange({
        min: minRange,
        max: maxRange
      });
    }
  }, [minRange, maxRange, onChange]);
  return /*#__PURE__*/React.createElement("div", {
    className: "slider-container"
  }, /*#__PURE__*/React.createElement("div", {
    className: "slider"
  }, /*#__PURE__*/React.createElement("input", {
    type: "range",
    name: "min",
    min: minPrice,
    max: maxPrice,
    value: minRange,
    onChange: updateRange,
    className: "min-range"
  }), /*#__PURE__*/React.createElement("input", {
    type: "range",
    name: "max",
    min: minPrice,
    max: maxPrice,
    value: maxRange,
    onChange: updateRange,
    className: "max-range"
  }), /*#__PURE__*/React.createElement("div", {
    className: "track"
  }, /*#__PURE__*/React.createElement("div", {
    className: "range-track",
    style: {
      left: `${minRange / maxPrice * 100}%`,
      right: `${100 - maxRange / maxPrice * 100}%`
    }
  }))), /*#__PURE__*/React.createElement("div", {
    className: "price-display"
  }, /*#__PURE__*/React.createElement("span", null, "Min: $", minRange), /*#__PURE__*/React.createElement("span", null, "Max: $", maxRange)));
};

export { MultiRangeSlider as default };