React Range Slider BEM
A flexible slider for reactjs
Demo
Getting Started
Install via npm
Usage
; // ... { return <RangeSlider value=20 withBars /> ;}Options
min
Type: Number
Default: 0
Description: Min value for slider, default is 0.
// ... { return <RangeSlider min=0 /> ;}max
Type: Number
Default: 100
Description: Max value for slider, default is 100.
// ... { return <RangeSlider max=999 /> ;}value
Type:
value: PropTypesDefault: []
Description: Define the value, can be string or array
// ... { return <div> <RangeSlider value=1020 /> or <RangeSlider value=value:10 color: '#FFF' /> or <RangeSlider value='#FFF' '#FFS' /> </div> ;}orientation
Type: PropTypes.oneOf(['horizontal', 'vertical'])
Default: horizontal
Description: Orientation for slider, must be horizontal or vertical, default is horizontal.
// ... { return <RangeSlider orientation="vertical" /> ;}withBars
Type: Boolean
Default: false
Description: Options is slider show the bars or not, default false.
cursor
Type: Boolean
Default: false
Description: Options is slider show the cursors or not, default false. You can also set up a custom cursor and implement like ./Cursor.js
disabled
Type: Boolean
Default: false
Description: Options disable slider, default false. If set diabled with true cursors in the slider will unable to drag.
range
Type:
range: PropTypesDescription: Range for slider, menas you can set header or tailer cursor or both, something like blow: -|-----------|-
// ... { return <div> <RangeSlider range /> or <RangeSlider range=true false /> or <RangeSlider range=10 90 /> </div> ;}disabledHeader
Type: Boolean
Description: Disable slider header cursor.
// ... { return <RangeSlider range=10 disabledHeader /> ;}disabledTailer
Type: Boolean
Description: Disable slider tailer cursor.
// ... { return <RangeSlider range=null 90 disabledTailer /> ;}className
Type: String
Default: range-slider
Description: Slider classname
// ... { return <RangeSlider className="custom-slider" /> ;}modClassName
Type: String
Description: Slider modifier classname
// ... { return <RangeSlider className="custom-slider" modClassName="rating" /> ;}It will transform to
custom-slider_ratingon root element
onMouseDown
Type: Function
Default: function noop() {}
Description: Hook event for when mouse down for each cursor.
// ... { return <RangeSlider onMouseDown=somefunction /> ;}onBeforeChange
Type: Function
Default: function noop() {}
Description: Hook function before cursor dragging
onChange
Type: Function
Default: function noop() {}
Description: Hook function when cursor dragging
onAfterChange
Type: Function
Default: function noop() {}
Description: Hook function after cursor dragging
onBarClick
Type: Function
Default: function noop() {}
Description: Click event for each bar
/** * @param * @param * @param */// ... { return <RangeSlider onBarClick= /> ;}License
MIT © Anton Kuznetsov