React Sliders
A collection of slider components in React
Features
  • Support for both mobile and desktop devices
  • Works in vertical and horizontal orientation
  • Cutomizable styling
  • Responsive to keyboard events
  • ARIA support
A uncontrolled slider with single handleparameters - step: 2styling using classes
value: 50
AخA
 
1
<Slider
2
  defaultValue={value}
3
  step={2}
4
  onChange={this.onChange}
5
  wrapperClassName={styles.slider}
6
  trackClassName={styles.sliderTrack}
7
  handleClassName={styles.sliderHandle}
8
/>
A uncontrolled vertical-slider with single handleparameters - step: 2, orientation: verticalstyling using classes
value: 50
7
 
1
<Slider
2
  step={2}
3
  orientation="vertical"
4
  defaultValue={value}
5
  onChange={this.onChange}
6
  handleClassName={styles.sliderHandle}
7
/>
A controlled slider with single handleparameters - step: 5, value :50, min: -100, max: 100inline styling
value: 50
10
 
1
<Slider
2
  step={2}
3
  onChange={this.onChange}
4
  wrapperStyle={styles.slider}
5
  trackStyle={styles.trackStyle}
6
  handleStyle={styles.handleStyle}
7
  hoveredHandleStyle={styles.hoveredHandleStyle}
8
  focusedHandleStyle={styles.focusedHandleStyle}
9
  activeHandleStyle={styles.activeHandleStyle}
10
/>
A disabled slider with single handledisabled components can not be focused  W3Cparameters - step: 2, defaultValue: 25styling using classes
value: 50
10
 
1
<Slider
2
  step={2}
3
  disabled
4
  defaultValue={25}
5
  onChange={this.onChange}
6
  wrapperClassName={styles.slider}
7
  trackClassName={styles.sliderTrack}
8
  handleClassName={styles.sliderHandle}
9
  disabledHandleClassName={styles.disabledSliderHandle}
10
/>
A uncontrolled slider with two handlesparameters - step: 2styling using classes
value.start: value.end:
8
 
1
<RangeSlider
2
  step={2}
3
  onChange={this.onChange}
4
  wrapperClassName={styles.slider}
5
  highlightedTrackClassName={styles.sliderHighlightedTrack}
6
  trackClassName={styles.sliderTrack}
7
  handleClassName={styles.sliderHandle}
8
/>
A uncontrolled vertical slider with two handlesparameters - step: 2styling using classes
value.start: value.end:
7
 
1
<RangeSlider
2
  step={2}
3
  value={value}
4
  onChange={this.onChange}
5
  orientation="vertical"
6
  handleClassName={styles.sliderHandle}
7
/>
A controlled slider with two handlesparameters - step: 5, value : { start: -50, end: 50 }, min: -100, max: 100inline styling
value.start: -50value.end: 50
14
 
1
<RangeSlider
2
  step={5}
3
  value={value}
4
  min={-100}
5
  max={100}
6
  onChange={this.onChange}
7
  wrapperStyle={styles.slider}
8
  trackStyle={styles.trackStyle}
9
  highlightedTrackStyle={styles.highlightedTrackStyle}
10
  handleStyle={styles.handleStyle}
11
  hoveredHandleStyle={styles.hoveredHandleStyle}
12
  focusedHandleStyle={styles.focusedHandleStyle}
13
  activeHandleStyle={styles.activeHandleStyle}
14
/>
A readonly slider with two handlesreadOnly components can be focused  W3Cparameters - step: 2, defaultValue: { start: 20, end: 80 }default styles
value.start: 20value.end: 80
6
 
1
<RangeSlider
2
  step={2}
3
  readOnly
4
  defaultValue={value}
5
  onChange={this.onChange}
6
/>
Future Plans
  • I plan to add to the collection more variety of slider and also improve current sliders and add more features to them.