0.5.1 • Published 6 years ago
@slup/slider v0.5.1
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
/>