React Range Slider

A tooltip component for react.

Screenshot

Live demo

Click here: https://ecmadao.github.io/rc-range-slider

Install

$ npm i rc-range-slider --save

Build config

• Webpack 3.x config example

// webpack config file

// loaders
const postcssLoader = {
  loader: 'postcss-loader',
  options: {
    config: {
      path: path.join(__dirname, 'postcss.config.js')
    }
  }
};
const cssModulesLoader = ExtractTextPlugin.extract({
  fallback: 'style-loader',
  use: [
    {
      loader: 'css-loader',
      options: {
        modules: true,
        sourceMaps: true,
        importLoaders: 1,
        localIdentName: '[name]__[local]___[hash:base64:5]'
      }
    },
    postcssLoader
  ],
});

const webpackConfig = {
  module: {
    rules: [
      {
        test: /\.css$/,
        include: /rc-range-slider|rc-tipso/,
        loaders: cssModulesLoader
      }
    ]
  }
};

• Webpack 1.x config example

const webpackConfig = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        include: /rc-range-slider|rc-tipso/,
        loaders: cssLoaders
      }
    ]
  },
  postcss: () => {
    return [
      require('postcss-cssnext')
    ]
  }
};

Usage

import Slider from 'rc-range-slider';

// ...

render() {
  return (
    <Slider value={[15, 35]} minRange={5}/>
  )
}

Example

Click here to see tipso usage examples.

Api

| name | type | default | description | | -------------- | --------------------------------------- | ---------- | ---------------------------------------- | | tipFormatter | PropTypes.func | null | A function to custom tooltip value. Should return a string or DOM. | | min | PropTypes.number | 0 | Slider min value. | | max | PropTypes.number | 100 | Slider max value. | | value | PropTypes.number or PropTypes.array | 10 | When it be a number, Slider will render single range select. Or pass a array to support multi range select. | | minRange | PropTypes.number | 1 | The minimum range value between two pickers. | | jump | PropTypes.bool | false | When you are dragging the picker, jump decide to update the value by using jumpRange. Besides, section points will rendered by sectionRange. | | jumpRange | PropTypes.number | 1 | The minimum value to change, should work with jump props. | | sectionRange | PropTypes.number or PropTypes.array | null | The section range to render the section point. | | clickable | PropTypes.bool | false | Whether the row can be clicked or not. | | updateWhenDrag | PropTypes.bool | false | In default config, you will receive onChange callback after drag finished. But by setting updateWhenDrag to true, you can get callback as soon as value changed when dragging. | | onChange | PropTypes.func | () => {} | The callback when value changed. |

Custom style

| name | type | default | description | | ------------ | ------------------ | ------- | ---------------------------------------- | | className | PropTypes.string | '' | Custom className to change UI. | | draggerClass | PropTypes.string | '' | Custom dragger style | | tipsoClass | PropTypes.string | '' | Custom tip style | | pathwayClass | PropTypes.string | '' | Custom pathway style | | color | PropTypes.string | green | Theme color. Support green, dark, blue, red, gray | | useTipso | PropTypes.bool | true | Whether use tip or not when hover picker. |

Dev

$ git clone [email protected]:ecmadao/rc-range-slider.git
$ cd rc-range-slider
$ npm i
$ npm run storybook

License

Released under MIT License