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