neo-react-semantic-ui-range

A modern single a multi React Slider to use with Semantic-UI or Fomantic-UI.

IMPORTANT: although the library mentions Semantic UI/Fomantic UI. It is not necessary to install this dependency. This library contains the needed styles to fit as well as possible with that framework, but you can use it in any desired environment.

Installation

npm i neo-react-semantic-ui-range

# Or

yarn add neo-react-semantic-ui-range

Usage

Here are some basic examples, but you can play with all the parameters in the official Storybook.

Single slider

// Component
import { SingleRangeSlider } from 'neo-react-semantic-ui-range'

// Styles
import 'neo-react-semantic-ui-range/dist/styles.min.css'

const MySingleSlider = (props) => {
	const [value, setValue] = useState<number>(45.5)

	/**
	 * Handles changes.
	 *
	 * @param newValue - New value.
	 */
	function handleChange (newValue: number) {
		setValue(newValue)
	}

	return <SingleRangeSlider
		value={value}
		defaultMinValue={0}
		defaultMaxValue={100}
		step={0.5}
		color='blue'
		onChange={handleChange}
	/>
}

Multi range slider

// Component
import { MultiRangeSlider } from 'neo-react-semantic-ui-range'

// Styles
import 'neo-react-semantic-ui-range/dist/styles.min.css'

const MyMultiRangeSlider = (props) => {
	const [minValue, setMinValue] = useState<number>(30)
  	const [maxValue, setMaxValue] = useState<number>(60)

	/**
	 * Handles changes.
	 *
	 * @param newActualMin - New min value.
	 * @param newActualMax - New max value.
	 */
	function handleChange (newActualMin: number, newActualMax: number) {
		setMinValue(newActualMin)
		setMaxValue(newActualMax)
	}

	return <MultiRangeSlider
		minValue={minValue}
		maxValue={maxValue}
		defaultMinValue={0}
		defaultMaxValue={100}
		margin={1}
		color='green'
		onChange={handleChange}
	/>
}

Features

• 🚀 Written in modern React using hooks and clean
• ✨ Fully Typescript support
• 📖 A lot of colors and Storybook

Development

Any PR is welcome! A typical roadmap to contribute would be:

1. Install dependencies with npm i or yarn install
2. Fix a bug, add a new feature or make some changes.
3. Run Storybook to play and test: npm run storybook
4. Check if all linter rules are covered: npm run lint
5. To build the entire package we use Rollup: npm run build
6. Make a PR.

License

This repository is distributed under the terms of the MIT license.