vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

fix (#942): slider increments with steps

old
rubenmoya 2016-11-21 20:07:44 +01:00
parent 879a714531
commit 66a630cf57
2 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/slider/Slider.js
View File

@ -197,8 +197,9 @@ const factory = (ProgressBar, Input) => {
positionToValue (position) {
const { sliderStart: start, sliderLength: length } = this.state;
const { max, min } = this.props;
return this.trimValue((position.x - start) / length * (max - min) + min);
const { max, min, step } = this.props;
const pos = (position.x - start) / length * (max - min);
return this.trimValue(Math.round(pos / step) * step + min);
}
start (position) {

4
spec/components/slider.js
View File

@ -20,9 +20,9 @@ class SliderTest extends React.Component {
<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>
<Slider pinned snaps min={0} max={10} step={1} editable value={this.state.slider3} onChange={this.handleChange.bind(this, 'slider3')} />
<Slider pinned snaps min={0} max={10} step={2} editable value={this.state.slider3} onChange={this.handleChange.bind(this, 'slider3')} />
<p>Disabled status</p>
<Slider disabled pinned snaps min={0} max={10} step={1} editable value={this.state.slider3} onChange={this.handleChange.bind(this, 'slider3')} />
<Slider disabled pinned snaps min={0} max={10} step={2} editable value={this.state.slider3} onChange={this.handleChange.bind(this, 'slider3')} />
</section>
);
}