@bulmil/core
Version:
185 lines (184 loc) • 5.97 kB
JavaScript
/*!
* Bulmil - MIT License
*/
import { h, Host } from "@stencil/core";
export class Slider {
constructor() {
this.handleInputChange = (event) => {
this.value = event.target.value;
};
this.step = 1;
this.min = 0;
this.max = 100;
this.value = undefined;
this.color = undefined;
this.size = undefined;
this.isCircle = false;
this.disabled = false;
}
render() {
return (h(Host, { key: 'fbb58b21d30ac50d8797e9fe74cd6c7049af33d0' }, h("input", { key: '9fb93f331a5817c94c267f96b672a485fcafc055', 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-primary' | 'is-success' | 'is-warning' | 'is-danger' | 'is-info'",
"resolved": "\"is-danger\" | \"is-info\" | \"is-primary\" | \"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"
}
};
}
}