bruno-ui/dist/bruno/brn-slider.entry.js

Bruno UI Kit

import { r as registerInstance, h, d as getElement } from './core-70b4f9b5.js';

const SliderComponent = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        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;
    }
    get _element() { return getElement(this); }
    static get style() { return "brn-slider .slider {\n  position: relative;\n}\nbrn-slider .slider .slider__bar {\n  display: block;\n  height: 0.5rem;\n  background-color: #eaecf0;\n  -webkit-border-radius: 1rem;\n  -moz-border-radius: 1rem;\n  -ms-border-radius: 1rem;\n  border-radius: 1rem;\n}\nbrn-slider .slider .slider__handle {\n  top: -0.25rem;\n  left: 0;\n  position: absolute;\n  width: 1rem;\n  height: 1rem;\n  background-color: #3abeff;\n  cursor: pointer;\n  -ms-user-select: none;\n  -webkit-user-select: none;\n  -moz-user-select: -moz-none;\n  user-select: none;\n  -webkit-border-radius: 1rem;\n  -moz-border-radius: 1rem;\n  -ms-border-radius: 1rem;\n  border-radius: 1rem;\n}"; }
};

export { SliderComponent as brn_slider };