React Slider

A React version of an MDC Slider.

Installation

npm install @whatoplay/react-slider

Usage

Styles

with Sass:

import '@whatoplay/react-slider/index.scss';

with CSS:

import '@whatoplay/react-slider/dist/slider.css';

Javascript Instantiation

import React from 'react';
import Slider from '@whatoplay/react-slider';

class MyApp extends React.Component {
  state = {valueNow: 0};

  render() {
    return (
      <Slider valueMin={0} valueMax={10} valueNow={this.state.valueNow}
        notifyInput={(valueNow) => this.setState({valueNow})}/>
    );
  }
}

Props

Prop Name	Type	Description
className	String	Classes to be applied to the root element.
notifyInput	Function(valueNow) => void	Fires while thumb is moving
notifyChange	Function(valueNow) => void	Fires after moving thumb
valueMin	Number	Required. Mininum value
valueMax	Number	Required. Maximum value
valueNow	Number	Required. Initial value
disabled	Boolean	disabled attirbute
step	Number	steps per move
tabIndex	Number	tabindex attribute
dir	String	Slider direction