simple-range-slider-nextjs v0.0.5

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.

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

simplerangesliderblack.css

Following is the list of props that control the component

Event List

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;
};

How to Install

copy following code and run on CLI

npm install simple-range-slider-nextjs

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;

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;