# simple-range-slider-nextjs

> a react component compatible with Next.js that can easy to use and interact with parent component with props and events.

Latest version **0.0.5** (published 2023-04-02) · 0 weekly downloads

## Install

```sh
npm install simple-range-slider-nextjs
pnpm add simple-range-slider-nextjs
yarn add simple-range-slider-nextjs
bun add simple-range-slider-nextjs
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2023-04-02 |
| First published | 2023-04-01 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 12 |
| Unpacked size | 153.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | mateuscardosogs |

## Links

- npm: https://www.npmjs.com/package/simple-range-slider-nextjs
- Homepage: https://github.com/mateuscardosogs/simple-range-slider-nextjs
- npm.io page: https://npm.io/package/simple-range-slider-nextjs

## Dependencies (12)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [typescript](https://npm.io/package/typescript.md) ^4.4.2
- [web-vitals](https://npm.io/package/web-vitals.md) ^2.1.0
- [@types/jest](https://npm.io/package/@types/jest.md) ^27.0.1
- [@types/node](https://npm.io/package/@types/node.md) ^16.7.13
- [@types/react](https://npm.io/package/@types/react.md) ^18.0.0
- [react-scripts](https://npm.io/package/react-scripts.md) 5.0.1
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^18.0.0
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^13.0.0
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.14.1
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^13.2.1

## Recent versions

- 0.0.5 (latest) — 2023-04-02
- 0.0.2 — 2023-04-01

## README

# simple-range-slider-nextjs

a react component compatible with Next.js that can easy to use and interact with parent component with props and events.

------------

## Image examples.
[<img src="./images/simple-range-slider.png">](https://github.com/mateuscardosogs/simple-range-slider-nextjs)
[<img src="./images/range-slider-with-custom-css.png">](https://github.com/mateuscardosogs/simple-range-slider-nextjs)
[<img src="./images/range-slider-week-days.png">](https://github.com/mateuscardosogs/simple-range-slider-nextjs)
[<img src="./images/range-slider-date-range.png">](https://github.com/mateuscardosogs/simple-range-slider-nextjs)
[<img src="./images/range-slider-time-range.png">](https://github.com/mateuscardosogs/simple-range-slider-nextjs)
[<img src="./images/range-slider-negative-positive-range.png">](https://github.com/mateuscardosogs/simple-range-slider-nextjs)
[<img src="./images/range-slider-step-only-round.png">](https://github.com/mateuscardosogs/simple-range-slider-nextjs)
[<img src="./images/range-slider-custom-style-props.png">](https://github.com/mateuscardosogs/simple-range-slider-nextjs)
------------

# No Dependency only single component file and css file 

## SimpleRangeSlider.jsx , SimpleRangeSlider.css

### You can customize css to change UI/UX.

Download CSS file and modify it and reference it with baseClassName attribute

[simplerangeslider.css](https://raw.githubusercontent.com/mateuscardosogs/simple-range-slider-nextjs/main/src/components/simplerangeslider.css)

[simplerangesliderblack.css](https://raw.githubusercontent.com/mateuscardosogs/simple-range-slider-nextjs/main/src/components/simplerangesliderblack.css)

<hr/>

Following is the list of props that control the component 

|props   | type | default | description | 
| ------------ | ------------ | ------------ | ------------ |
| min  | Number  | 0 | Slider Minimum Value that user can set |
| max  | Number  | 100 | Slider Maximum Value that user can Set |
| minValue  | Number  | 25 | Slider range selected minimum value that will show default selected |
| maxValue  | Number  | 75 | Slider range selected maximum value that will show default selected |
| step  | Number  | 5 | Slider change value that will change when bar clicked or keyboard arrow key pressed |
| stepOnly  | Boolean  | false | specify user to select only values in round of step only |
| preventWheel  | Boolean  | false | true then it not accept mouse wheel to change its value. false then (shift + wheel) change minValue (ctrl+wheel) change maxValue, (ctrl+shift+wheel) change both values |
|ruler|Boolean|true|is ruler visible or not|
|label|Boolean|true|is label visible or not|
|labels|String Array||specify steps label string value|
|minCaption|String||caption on min thumb when sliding - can set on onChange/onInput event|
|maxCaption|String||caption on max thumb when sliding - can set on onChange/onInput event|
|subSteps|Boolean|false|is small steps line visible or not|
|baseClassName|String|simple-range-slider|Change CSS style of your own|
|className|String|''|Add additional class with baseClassName to div.simple-range-slider|
|style|React.CSSProperties||specify/override additional style on div.simple-range-slider|
|barLeftColor|String-Color||specify slider left part background color|
|barRightColor|String-Color||specify slider right part background color|
|barInnerColor|String-Color||specify slider inner part background color|
|thumbLeftColor|String-Color||specify slider left thumb background color|
|thumbRightColor|String-Color||specify slider right thumb background color|
|ref|React.useRef||reference to div.simple-range-slider|

### Event List

|Event|Description|
|-|-|
|onChange|trigger when thumb mouse up OR slider value change done|
|onInput|trigger on thumb mouse move OR slider value changing|


### typescript props definition 

	Props = {
		min?: number | string;
		max?: number | string;
		step?: number | string;
		minValue?: number | string;
		maxValue?: number | string;
		baseClassName?: string;
		className?: string;
		style?: React.CSSProperties;
		ruler?: boolean | string;
		label?: boolean | string;
		subSteps?: boolean | string;
		stepOnly?: boolean | string;
		preventWheel?: boolean | string;
		labels?: string[];
		minCaption?: string;
		maxCaption?: string;
		barLeftColor?: string;
		barRightColor?: string;
		barInnerColor?: string;
		thumbLeftColor?: string;
		thumbRightColor?: string;
		onInput?: (e: ChangeResult) => void;
		onChange?: (e: ChangeResult) => void;
	};


### onInput/onChange event parameter type - typescript
	type ChangeResult = {
		min: number;
		max: number;
		minValue: number;
		maxValue: number;
	};

<hr/>

## How to Install
copy following code and run on CLI

`npm install simple-range-slider-nextjs`

<hr/>

## How to use 
Example Code 


#### App.jsx

	import React, { useState } from "react";
	import SimpleRangeSlider from "simple-range-slider-nextjs";
	function App() {
	const [minValue, set_minValue] = useState(25);
	const [maxValue, set_maxValue] = useState(75);
	const handleInput = (e) => {
		set_minValue(e.minValue);
		set_maxValue(e.maxValue);
	};

	return (
		<div className="App">
			<SimpleRangeSlider
				min={0}
				max={100}
				step={5}
				minValue={minValue}
				maxValue={maxValue}
				onInput={(e) => {
					handleInput(e);
				}}
			/>
		</div>
		);
	}

	export default App;


<br/><br/>

#### App.tsx

	import React, { useState } from "react";
	import SimpleRangeSlider, { ChangeResult } from "simple-range-slider-nextjs";

	const App = () => {
		const [minValue, setMinValue] = useState(25);
		const [maxValue, setMaxValue] = useState(75);

		return (
			<div className='App'>
				<div className='simple-range-slider-container'>
					<b>Simple range slider with default values</b>
					<hr />
					<SimpleRangeSlider
						min={0}
						max={100}
						step={5}
						minValue={minValue}
						maxValue={maxValue}
						onInput={(e: ChangeResult) => {
							setMinValue(e.minValue);
							setMaxValue(e.maxValue);
						}}
					></SimpleRangeSlider>
					<div style={{ display: 'flex', justifyContent: 'center' }}>
						<div style={{ margin: '10px' }}>onInput:</div>
						<div style={{ margin: '10px' }}>{minValue}</div>
						<div style={{ margin: '10px' }}>{maxValue}</div>
					</div>
				</div>
			</div>
		)
	
	}
	export default App;

---
_Source: https://npm.io/package/simple-range-slider-nextjs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._