next-range-slider
TypeScript icon, indicating that this package has built-in type declarations

1.0.5 • Public • Published

Next Range Slider

dow lis min miz dep tree

Preview Image

A minimal range slider component for React, compatible with NextJS.

Installation

Install using your favorite package manager:

npm install next-range-slider

Add CSS import to your file or project root (nextjs):

import 'next-range-slider/dist/main.css';

Import inside component JSX/TSX:

import { RangeSlider } from 'next-range-slider';

...

const [low, setLow] = useState(-1000);
const [high, setHigh] = useState(1000);

...

<RangeSlider
    min={-1000}
    max={1000}
    step={100}
    options={{
      leftInputProps: {
        value: low,
        onChange: (e) => setLow(Number(e.target.value)),
      },
      rightInputProps: {
        value: high,
        onChange: (e) => setHigh(Number(e.target.value)),
      },
    }}
/>
...

Prop Types

type RangeSliderProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
  min: number;
  max: number;
  step?: number;
  options?: RangeSliderOptions;
};

type RangeSliderOptions = {
  theme?: Themes;
  thumb?: ThumbProps;
  track?: TrackProps;
  range?: RangeProps;
  leftInputProps?: ReactInputProps;
  rightInputProps?: ReactInputProps;
};

type ReactInputProps = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;

type RangeProps = {
  background?: string;
  border?: string;
};

type ThumbProps = {
  background?: string;
  focusBackground?: string;
  width?: string;
  height?: string;
  /** defauts to translateY(-25%) in preset theme */
  transform?: string;
  borderRadius?: string;
  border?: string;
};

type TrackProps = {
  background?: string;
  width?: string;
  height?: string;
  transform?: string;
  borderRadius?: string;
  border?: string;
  margin?: string;
  padding?: string;
};

Extending Functionality

The component is isolated to the component file src/components/RangeSlider.tsx and it's CSS file main.css. You can clone and add your own default theme, as well as extend by adding more themes and tweaking css files.

Package Sidebar

Install

npm i next-range-slider

Weekly Downloads

99

Version

1.0.5

License

AGPL-3.0-or-later

Unpacked Size

67.9 kB

Total Files

28

Last publish

Collaborators

  • abhinavrobinson