bruno-ui
Version:
Bruno UI Kit
75 lines (74 loc) • 2.32 kB
JavaScript
import { h } from "@stencil/core";
export class SliderComponent {
constructor() {
this._active = false;
}
MouseMoveHandler(e) {
if (this._active) {
this.SetHandlePosition(e);
}
}
MouseUpHandler() {
this._active = false;
}
componentDidLoad() {
this.handle = this.GetHandle();
}
render() {
return (h("div", { class: "slider" },
h("div", { class: "slider__bar", onClick: e => {
this.SetHandlePosition(e);
} }),
h("div", { class: "slider__handle", onMouseDown: () => {
this._active = true;
} })));
}
GetHandle() {
return this._element.getElementsByClassName("slider__handle")[0];
}
GetSlider() {
return this._element.getElementsByClassName("slider")[0];
}
SetHandlePosition(e) {
let position = this.CalculatePosition(e);
this.handle.style.left = `${position}px`;
}
CalculatePosition(e) {
let slider = this.GetSlider();
let position = e.clientX - this._element.offsetLeft - this.handle.clientWidth / 2;
if (position < this._element.offsetLeft) {
position = 0;
}
else if (e.clientX > slider.offsetWidth) {
position =
slider.offsetWidth -
this._element.offsetLeft -
this.handle.clientWidth / 2;
}
return position;
}
static get is() { return "brn-slider"; }
static get originalStyleUrls() { return {
"$": ["slider.component.scss"]
}; }
static get styleUrls() { return {
"$": ["slider.component.css"]
}; }
static get states() { return {
"_active": {}
}; }
static get elementRef() { return "_element"; }
static get listeners() { return [{
"name": "mousemove",
"method": "MouseMoveHandler",
"target": "document",
"capture": false,
"passive": true
}, {
"name": "mouseup",
"method": "MouseUpHandler",
"target": "document",
"capture": false,
"passive": true
}]; }
}