https://github.com/abhinavrobinson/next-range-slider

Minimal react component for range slider made for NextJS.
https://github.com/abhinavrobinson/next-range-slider

cjs esm hacktoberfest javascript nextjs polyfill range-slider react typescript

Last synced: 5 days ago
JSON representation

Minimal react component for range slider made for NextJS.

• Host: GitHub
• URL: https://github.com/abhinavrobinson/next-range-slider
• Owner: AbhinavRobinson
• License: agpl-3.0
• Created: 2022-08-11T11:24:46.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-10-01T05:33:39.000Z (about 2 years ago)
• Last Synced: 2024-10-10T02:37:05.067Z (2 months ago)
• Topics: cjs, esm, hacktoberfest, javascript, nextjs, polyfill, range-slider, react, typescript
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/next-range-slider
• Size: 55.7 KB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Next Range Slider

![dow](https://badgen.net/npm/dt/next-range-slider)

![lis](https://badgen.net/npm/license/next-range-slider)

![min](https://badgen.net/bundlephobia/min/next-range-slider)

![miz](https://badgen.net/bundlephobia/minzip/next-range-slider)

![dep](https://badgen.net/bundlephobia/dependency-count/next-range-slider)

![tree](https://badgen.net/bundlephobia/tree-shaking/next-range-slider)

[![Preview Image](docs/images/slider.jpg)](https://github.com/AbhinavRobinson/next-range-slider/blob/main/docs/images/slider.jpg)

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

## Installation

Install using your favorite package manager:

```bash

npm install next-range-slider

```

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

```tsx

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

```

Import inside component JSX/TSX:

```tsx

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

...

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

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

...

 setLow(Number(e.target.value)),

      },

      rightInputProps: {

        value: high,

        onChange: (e) => setHigh(Number(e.target.value)),

      },

    }}

/>

...

```

## Prop Types

```typescript

type RangeSliderProps = React.DetailedHTMLProps, 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, 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.

## Authors

- [@AbhinavRobinson](https://github.com/AbhinavRobinson)