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:
- Install dependencies with
npm i
oryarn install
- Fix a bug, add a new feature or make some changes.
- Run Storybook to play and test:
npm run storybook
- Check if all linter rules are covered:
npm run lint
- To build the entire package we use Rollup:
npm run build
- Make a PR.
License
This repository is distributed under the terms of the MIT license.