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

Merge pull request #988 from rubenmoya/fix-slider 

fix (#942): slider increments with steps
old
Javi Velasco 2016-11-21 20:17:43 +01:00 committed by GitHub
parent 7915889289 66a630cf57
commit bc0d9d8dfb
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) { positionToValue (position) {
const { sliderStart: start, sliderLength: length } = this.state; const { sliderStart: start, sliderLength: length } = this.state;
const { max, min } = this.props; const { max, min, step } = this.props;
return this.trimValue((position.x - start) / length * (max - min) + min); const pos = (position.x - start) / length * (max - min);
return this.trimValue(Math.round(pos / step) * step + min);
} }
start (position) { 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> <p>With steps, initial value and editable</p>
<Slider min={0} max={10} editable value={this.state.slider2} onChange={this.handleChange.bind(this, 'slider2')} /> <Slider min={0} max={10} editable value={this.state.slider2} onChange={this.handleChange.bind(this, 'slider2')} />
<p>Pinned and with snaps</p> <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> <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> </section>
); );
} }