Slup - Slider

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:

Sliders are ideal components for adjusting settings that reflect intensity levels, such as volume, brightness, or color saturation.

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
/>