{
	"Name": "GeneXusUnanimo.Slider",
	"Target": "",
	"IsControlType": true,
	"Template": "<div class=\"slider-container\">    <input type=\"range\" min=\"{{MinValue}}\" max=\"{{MaxValue}}\" step=\"{{Step}}\" class=\"slider\" tabindex=\"0\" {{^Enabled}}disabled{{/Enabled}} {{DataElement}}>	<output class=\"slider-value\"></div> ", 
	"Events": [
		{
			"Name": "Event",
			"On": "click",
			"Parameters": ""
		} ,
		{
			"Name": "ControlValueChanged",
			"On": "controlvaluechanged",
			"Parameters": ""
		} 
	],
	"Properties": [
		{
			"Id": "MinValue",
			"Name": "MinValue",
			"Type": "numeric",
			"Default": "0"
		} ,
		{
			"Id": "MaxValue",
			"Name": "MaxValue",
			"Type": "numeric",
			"Default": "100"
		} ,
		{
			"Id": "Step",
			"Name": "Step",
			"Type": "numeric",
			"Default": "1"
		} ,
		{
			"Id": "Enabled",
			"Name": "Enabled",
			"Type": "boolean",
			"Default": "true"
		} ,
		{
			"Id": "AttID",
			"Name": "Attribute",
			"Type": "numeric",
			"Default": ""
		} 
	],
	"Methods": {
		"Public": [
		],
		"Private": [
		]
	},
	"Scripts": {
		"AfterShow": [
			{
				"Name": "InitSlider",
				"Source": "  	const UC = this;		var containerEl = document.getElementById(UC.ContainerName);	var el = containerEl.getElementsByTagName(\"input\")[0];	var output = containerEl.getElementsByTagName(\"output\")[0];	containerEl = containerEl.firstChild;	containerEl.setAttribute(\"id\", \"sliderContainer\" + UC.ControlId);	el.setAttribute(\"id\", \"slider\" + UC.ControlId);	output.setAttribute(\"for\", \"slider\" + UC.ControlId);	const range = el;	const bubble = output;		setBubble(range, bubble);		range.addEventListener(\"input\", function() {		setBubble(range, bubble);		if (UC.ControlValueChanged){			UC.ControlValueChanged()		}	});		range.addEventListener(\"keydown\", function(ev){		switch (ev.keyCode) {			case 37:			case 40:				range.value - UC.Step;				break;			case 38:			case 39:				range.value + UC.Step;				break;		}	})		function setBubble(range, bubble) {		const val = range.value;		const min = range.min ? range.min : 0;		const max = range.max ? range.max : 100;		const newVal = Number(((val - min) * 100) / (max - min));		bubble.innerHTML = val;		bubble.style.left = `calc(${newVal}% + (${8 - newVal * 0.15}px))`;	}",
				"AngularLocation": ""
			} 
		],
		"BeforeShow": [
		]
	},
	"Dependencies": [
	],
	"Imports": [
	],
	"Styles": [
	]
}