bulmil/dist/collection/core/form/slider/slider.js


import { Component, Prop, h, Host } from '@stencil/core';
export class Slider {
    constructor() {
        /**
         * Step
         */
        this.step = 1;
        /**
         * Min
         */
        this.min = 0;
        /**
         * CSS Classes
         */
        this.max = 100;
        /**
         * Circle
         */
        this.isCircle = false;
        /**
         * Disabled
         */
        this.disabled = false;
        this.handleInputChange = (event) => {
            this.value = event.target.value;
        };
    }
    render() {
        return (h(Host, null,
            h("input", { type: "range", onChange: this.handleInputChange, class: {
                    slider: true,
                    'is-fullwidth': true,
                    [this.color]: Boolean(this.color),
                    [this.size]: Boolean(this.size),
                    'is-circle': this.isCircle,
                }, step: this.step, min: this.min, max: this.max, value: this.value, disabled: this.disabled })));
    }
    static get is() { return "bm-slider"; }
    static get originalStyleUrls() { return {
        "$": ["slider.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["slider.css"]
    }; }
    static get properties() { return {
        "step": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Step"
            },
            "attribute": "step",
            "reflect": false,
            "defaultValue": "1"
        },
        "min": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Min"
            },
            "attribute": "min",
            "reflect": false,
            "defaultValue": "0"
        },
        "max": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "CSS Classes"
            },
            "attribute": "max",
            "reflect": false,
            "defaultValue": "100"
        },
        "value": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Value"
            },
            "attribute": "value",
            "reflect": true
        },
        "color": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'is-success' | 'is-warning' | 'is-danger' | 'is-info'",
                "resolved": "\"is-danger\" | \"is-info\" | \"is-success\" | \"is-warning\"",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Color"
            },
            "attribute": "color",
            "reflect": false
        },
        "size": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'is-small' | 'is-medium' | 'is-large'",
                "resolved": "\"is-large\" | \"is-medium\" | \"is-small\"",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Size"
            },
            "attribute": "size",
            "reflect": false
        },
        "isCircle": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Circle"
            },
            "attribute": "is-circle",
            "reflect": false,
            "defaultValue": "false"
        },
        "disabled": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Disabled"
            },
            "attribute": "disabled",
            "reflect": false,
            "defaultValue": "false"
        }
    }; }
}