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

License

MIT