2015-10-11 20:07:09 +03:00
|
|
|
import React from 'react';
|
2015-09-21 11:01:52 +03:00
|
|
|
import Slider from '../../components/slider';
|
|
|
|
|
2015-11-09 04:14:02 +03:00
|
|
|
class SliderTest extends React.Component {
|
|
|
|
state = {
|
|
|
|
slider2: 5,
|
2017-01-26 20:05:32 +03:00
|
|
|
slider3: 1,
|
2015-11-09 04:14:02 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
handleChange = (slider, value) => {
|
2017-01-26 20:05:32 +03:00
|
|
|
this.setState({ ...this.state, [slider]: value });
|
2015-11-09 04:14:02 +03:00
|
|
|
};
|
|
|
|
|
2017-01-26 20:05:32 +03:00
|
|
|
render() {
|
2015-11-09 04:14:02 +03:00
|
|
|
return (
|
|
|
|
<section>
|
|
|
|
<h5>Sliders</h5>
|
|
|
|
<p>Normal slider</p>
|
|
|
|
<Slider value={this.state.slider1} onChange={this.handleChange.bind(this, 'slider1')} />
|
|
|
|
<p>With steps, initial value and editable</p>
|
|
|
|
<Slider min={0} max={10} editable value={this.state.slider2} onChange={this.handleChange.bind(this, 'slider2')} />
|
|
|
|
<p>Pinned and with snaps</p>
|
2016-11-21 22:07:44 +03:00
|
|
|
<Slider pinned snaps min={0} max={10} step={2} editable value={this.state.slider3} onChange={this.handleChange.bind(this, 'slider3')} />
|
2016-10-22 18:12:41 +03:00
|
|
|
<p>Disabled status</p>
|
2016-11-21 22:07:44 +03:00
|
|
|
<Slider disabled pinned snaps min={0} max={10} step={2} editable value={this.state.slider3} onChange={this.handleChange.bind(this, 'slider3')} />
|
2015-11-09 04:14:02 +03:00
|
|
|
</section>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
2015-09-21 11:01:52 +03:00
|
|
|
|
2015-10-20 08:40:51 +03:00
|
|
|
export default SliderTest;
|