This package contains the Slider, a Material Design Component which is part of a bigger ecosystem called Slup

Description

From Google's Material Design guidelines:

Installation

This package can be installed with NPM

npm install --save @slup/slider

Usage

import { Slider } from '@slup/slider'

export class Test extends Component {
  state = { value: 0 }

  handleChange(value) {
    this.setState({ value })
  }

  render() {
    return (
      <Slider
        onChange={this.handleChange.bind(this)}
        value={this.state.value}
        max={100}
      />
    )
  }
}

Available properties

| Props | Type | Default | Documentation | |-------------|:-------------:|:-------------:|------: | | onChange | function | none | Link | | value | number | 0 | Link | | max | number | 0 | Link | | disabled | boolean | false | Link | | discrete | boolean | false | Link |

Property: 'disabled'

This property will disable the slider

<Slider
  onChange={this.handleChange.bind(this)}
  value={this.state.value}
  max={this.state.total}
  disabled
/>

Property: 'discrete'

This property will make a discrete slider which shows the value inside a thumb

<Slider
  onChange={this.handleChange.bind(this)}
  value={this.state.value}
  max={this.state.total}
  discrete
/>