import { h } from '../webcomponents.core.js';

class SliderComponent {
    valueChangedHandler(event) {
        this.valueChanged.emit(event.target.value);
    }
    render() {
        return (h("div", { class: "slider-container" },
            h("input", { type: "range", min: this.min, max: this.max, value: this.value, class: "slider", onChange: (event) => this.valueChangedHandler(event) })));
    }
    static get is() { return "ema-slider"; }
    static get properties() { return {
        "max": {
            "type": Number,
            "attr": "max"
        },
        "min": {
            "type": Number,
            "attr": "min"
        },
        "value": {
            "type": Number,
            "attr": "value"
        }
    }; }
    static get events() { return [{
            "name": "valueChanged",
            "method": "valueChanged",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }]; }
    static get style() { return "ema-slider .slider-container{width:100%}ema-slider .slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:5px;border-radius:5px;background:#d3d3d3;outline:none;opacity:.7;-webkit-transition:opacity .2s;transition:opacity .2s}ema-slider .slider:hover{opacity:1}ema-slider .slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:25px;height:25px;border-radius:50%;background:#77757a;cursor:pointer}ema-slider .slider::-moz-range-thumb{width:25px;height:25px;border-radius:50%;background:#77757a;cursor:pointer}"; }
}

export { SliderComponent as EmaSlider };
