react-slider-kit

react-slider-kit is going to be a comprehensive solution to slider feature in react. This component was originally inspired by dribble concept design The Range Slider Component.

This slider components is going to include:

1D and 2D sliders
Single and range sliders (in progress)
Horizontal and vertical sliders

Demo

The working demo of this component can be find at https://m-izadmehr.github.io/react-slider-kit/. An image of the original dribble design is shown below:

Installation

Using npm (use --save to include it in your package.json)

$ npm install react-slider-kit --save

Using yarn (this command also adds react-rangeslider to your package.json dependencies)

$ yarn add react-slider-kit

Getting Started

react-slider-kit is going to be a package of different sliders. In order to use a slider with a module bundler like webpack that supports either CommonJS or ES2015 modules, use as you would anything else:

// Using an ES6 transpiler like Babel import {} from 'react-rangeslider'  // Not using an ES6 transpiler var Slider = require('react-rangeslider')

Basic Example

import React, { Component } from 'react' import {SingleSlider} from 'react-slider-kit';  export default class SimpleExample extends Component {   constructor(props, context) {     super(props, context)     this.state = {       value: 0     }   }    handleOnChange = (value) => {     this.setState({       value: value     })   }    render() {     return (        <SingleSlider             min={0}              max={100}             step={20}             start={80}             onChangeStart={() => console.log('start drag')}             onChange={(value)=>console.log('drag value: ', value)}             onChangeComplete={this.handleOnChange}         />     )   } }

API

React-Slider-Kit is bundled as a combination of multiple components, and by default the single slider is imported.

Component

import {SingleSlider} from 'react-slider-kit';  // inside render  <SingleSlider     min={Number}     max={Number}     step={Number}     start={Number}     sliderTo={Number}     prefix={String}     postfix={String}     labels={Array}     sticky={Boolean}     tooltip={String}     orientation={String}      // chart configs     chartData={Array}     chartTooltip={Boolean}     chartLength={Number}      // methods     onChangeStart={function}     onChange={function}     onChangeComplete={function} />

Props

Prop	Type	Default	Description
`min`	number	0	minimum value the slider can hold
`max`	number	100	maximum value the slider can hold
`step`	number	1	step in which increments/decrements have to be made
`start`	number	0	starting value of slider
`sliderTo`	number	undefined	used to change the value of slider manually (componentWillReceiveProps is listening for changes in this value)
`tooltip`	string	'always'	controls when slider tooltip is shown (`always`/`onClick`/`never`)
`prefix`	string	''	prefix in tooltip label (eg. '$')
`postfix`	string	''	postfix in tooltip label (eg. 'kg')
`labels`	array	[]	custom labels to show on slider (eg. `[{x:0,val:'Start'}, {x:50,val:'Middle'},]`
`sticky`	boolean	false	controls whether slider handle can move smoothly or it can only sit on step values
`orientation`	string	'horizontal'	slider orientation (eg. `horizontal`, `vertical`)
`chartData`	array	-	used for showing 2D frequency graph on the slider (eg. `[{ y: 0 }, { y: 0.1 }, { y: 1 }, { y: 1.5 }, { y: 3 }]`)
`chartTooltip`	boolean	false	controls whether chart tooltip is shown on hover on data points
`chartLength`	number	200	chart height (width) of chart in horizontal (vertical) orientation
`onChangeStart`	function	-	function called on starting to drag slider
`onChange`	function	-	function called during moving slider(on every pixel)
`onChangeComplete`	function	-	function called after finishing slider move (used to set slider value on state)

License

MIT

Range Slider Kit For React