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

M-Izadmehr/react-slider-kit

M-Izadmehr

Reviews

Repository Details