Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

vertical slider sliding direction fixed

Browse source
This commit is contained in:
NikolaBorislavovHristov 2018-11-16 16:32:38 +02:00
parent fc16f0431f
commit ea36e30357
2 changed files with 4 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/common/Slider/Slider.js
View file

@ -42,7 +42,8 @@ class Slider extends Component {
const sliderLength = this.props.orientation === 'horizontal' ? sliderWidth : sliderHeight;
const mouseStart = this.props.orientation === 'horizontal' ? mouseX : mouseY;
const thumbStart = Math.min(Math.max(mouseStart - sliderStart, 0), sliderLength);
const slidingValue = (thumbStart / sliderLength) * (this.props.maxValue - this.props.minValue) + this.props.minValue;
const slidingValueCoef = this.props.orientation === 'horizontal' ? thumbStart / sliderLength : (sliderLength - thumbStart) / sliderLength;
const slidingValue = slidingValueCoef * (this.props.maxValue - this.props.minValue) + this.props.minValue;
return Math.floor(slidingValue);
}
@ -83,7 +84,7 @@ class Slider extends Component {
}
render() {
const thumbStartProp = this.props.orientation === 'horizontal' ? 'left' : 'top';
const thumbStartProp = this.props.orientation === 'horizontal' ? 'left' : 'bottom';
const thumbStart = (this.props.value - this.props.minValue) / (this.props.maxValue - this.props.minValue);
return (
<div className={classnames(styles['slider-container'], styles[this.props.orientation], this.props.containerClassName)} onMouseDown={this.onStartSliding}>

2
src/common/Slider/styles.less
View file

@ -45,7 +45,7 @@
}
.thumb {
transform: translateY(-50%);
transform: translateY(50%);
transition-property: top;
}
}