Есть код диапазонного слайдера.
При onClick
на поле слайдера я делаю
// Устанавливаю событие на движение мышью по документу
document.onmousemove = (event) => {
this.moveRunner(event);
};
// При отпускании кнопки мыши отключаю предыдущую функцию
document.onmouseup = () => {document.onmousemove = null;}
Я использую document.onmousemove
потому что если повесить onMouseMove
на поле слайдера, то когда курсор выйдет за область слайдера (6px
, а это гарантировано произойдет, если вы не ниндзя конечно), событие остановится. А задумка в том, чтобы зажал бегунок и мог водить по всему документу, а бегунок бегал в допустимых пределах. Именно поэтому я использую document.onmousemove
. Но если есть другое решение, позволяющее осуществить задумку, будет здорово.
Однако функция отключается только при повторном нажатии НЕ на слайдер.
Первый вопрос, как это исправить?
И второй вопрос, не обязательный, но буду очень признателен.
Вообще правильно реализована логика управления? Ведь document.onmousemove
насколько я понимаю, перетрет document.onmousemove
из другого места, если такое объявление имеется. То есть данный код становится не очень переиспользуемым, при переносе его в другой проект может произойти конфликт.
Как вообще реализовывается правильно такое управление? Спасибо!
Код диапазонного слайдера:
class App extends React.Component {
constructor (props) {
super(props);
this.state = {
limits: {
min: 1,
max: 100,
},
value: 50,
};
}
componentDidMount() {
this.setPositionRunner();
this.input.value = this.cutValue(this.input.value);
}
getPositionCenterRunnerX () {
let positionEvent = this.event.pageX - this.rangeElem.offsetLeft;
let newPositionEvent = positionEvent < 0 ? 0 : positionEvent;
return positionEvent > this.rangeElem.offsetWidth ? this.rangeElem.offsetWidth : newPositionEvent;
}
getLeft () {
let halfRunner = this.runner.offsetWidth / 2;
let left = this.event.pageX - this.rangeElem.offsetLeft - halfRunner;
let max = this.rangeElem.offsetWidth - halfRunner;
let newLeft = left < -halfRunner ? -halfRunner : left;
return left > max ? max : newLeft;
}
getValue() {
return Math.round(this.getPositionCenterRunnerX() / this.rangeElem.offsetWidth * (this.state.limits.max - this.state.limits.min) + this.state.limits.min);
}
setPositionRunner () {
let halfRunner = this.runner.offsetWidth / 2;
let positionCenter = Math.round((this.cutValue(this.state.value) - this.state.limits.min) / (this.state.limits.max - this.state.limits.min) * this.rangeElem.offsetWidth);
let left = positionCenter - halfRunner;
this.runner.style.left = `${left}px`;
}
moveRunner (event) {
this.event = event;
this.runner.style.left = `${this.getLeft()}px`;
let value = this.getValue();
this.setState({value});
}
onClick (event) {
this.moveRunner(event);
document.onmousemove = (event) => {
this.moveRunner(event);
};
document.onmouseup = () => {document.onmousemove = null;}
}
cutValue(value) {
value = value > this.state.limits.max ? this.state.limits.max : value;
value = value < this.state.limits.min ? this.state.limits.min : value;
return value;
}
onChangeInput (event) {
let value = event.currentTarget.value.match(/\d*/g).join('');
this.setState({value});
clearTimeout(this.timeOut);
this.timeOut = setTimeout(() => {
value = this.cutValue(value);
this.setState({value});
this.setPositionRunner();
}, 1000);
}
render () {
return (
<div className="slider">
<div
ref={element => this.rangeElem = element}
onClick={event => {this.onClick (event)}}
className="slider__range"
>
<div className="slider__runner" ref={element => this.runner = element} />
</div>
<div className="slider__view">
<p className="slider__limit">от {this.state.limits.min}</p>
<input
ref={element => this.input = element}
onChange={this.onChangeInput.bind(this)}
type="text"
className="slider__value"
value={this.state.value}
/>
<p className="slider__limit">до {this.state.limits.max}</p>
</div>
</div>
);
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
);
.slider {
padding: 50px 100px;
}
.slider__range {
position: relative;
height: 6px;
margin: 20px 0;
cursor: pointer;
background: #e2e2e2;
}
.slider__runner {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 20px;
height: 20px;
-webkit-border-radius: 100%;
border-radius: 100%;
background: #0094ff;
}
.slider__view {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.slider__limit {
display: inline-block;
}
.slider__value {
text-align: center;
border: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>