@mshafiqyajid/react-range

npm install @mshafiqyajid/react-range

import { RangeStyled } from "@mshafiqyajid/react-range/styled";
import "@mshafiqyajid/react-range/styles.css";

// Single slider
const [volume, setVolume] = useState(40);
<RangeStyled mode="single" value={volume} onChange={setVolume} tone="primary" label="Volume" />

// Range slider
const [range, setRange] = useState<[number, number]>([20, 80]);
<RangeStyled mode="range" value={range} onChange={setRange} tone="primary" label="Price range" />

// Auto-marks from step
<RangeStyled mode="single" min={0} max={100} step={25} marks />

// Custom labelled marks
<RangeStyled
  mode="range"
  marks={[
    { value: 0, label: "Low" },
    { value: 50, label: "Mid" },
    { value: 100, label: "High" },
  ]}
/>

// Show only while dragging (default)
<RangeStyled mode="single" showTooltip="drag" />

// Always visible
<RangeStyled mode="single" showTooltip="always" tooltipFormat={(v) => `$${v}`} />

// Never show
<RangeStyled mode="range" showTooltip="never" />

<RangeStyled
  mode="range"
  label="Budget"
  hint="Set your minimum and maximum"
  required
  value={range}
  onChange={setRange}
  onChangeEnd={handleSubmit}
/>

// Error state
<RangeStyled
  mode="range"
  label="Price"
  error="Range must be at least $10 apart"
  value={range}
  onChange={setRange}
/>

<RangeStyled mode="single" inverted value={value} onChange={setValue} />

import { useRange } from "@mshafiqyajid/react-range";

const { value, rootProps, trackProps, getThumbProps, getTrackFillProps } = useRange({
  defaultValue: [20, 80],
  min: 0,
  max: 100,
  mode: "range",
  onChange: (v) => console.log(v),
  onChangeEnd: (v) => console.log("committed:", v),
});

return (
  <div {...rootProps} className="my-range">
    <div {...trackProps} className="track">
      <div className="rail" />
      <div {...getTrackFillProps()} className="fill" />
      {[0, 1].map((i) => (
        <div key={i} {...getThumbProps(i)} className="thumb" />
      ))}
    </div>
  </div>
);