{"version":1,"customWidget":{"_id":"wXPjYXavENDE5u6H4","name":"Slider v2","description":"Outputs a value from 0 to 100.","props":[{"id":"puGdRpzJdrKyeFduN","name":"value","description":"","requireWriteable":false,"type":"integer"},{"id":"P5jKMNyavAF4wHWft","name":"Style_Prop","description":"","requireWriteable":false,"type":{"leftSliderColor":"color","thumbColor":"color","rightSliderColor":"color","lineWidth":"integer"}}],"events":[{"id":"BT4DTGmNAMcWw73rg","name":"value","description":"","type":"integer"}],"javascript":"const slider = document.getElementById('mySlider');\r\n\r\nconst value = getValue('value');\r\nslider.value = value || 50;\r\n\r\n\r\nconst Style = getValue('Style_Prop');\r\n\r\nlet lineWidth = Style.lineWidth || 6; \r\nlineWidth = lineWidth > 20 ? 20 : lineWidth;\r\nlet thumbColor = Style.thumbColor || '#d3d3d3';\r\nlet leftSliderColor = Style.leftSliderColor || '#d3d3d3';\r\nlet rightSliderColor = Style.rightSliderColor || '#d3d3d3';\r\n\r\nslider.style.height = `${lineWidth}px`;\r\nslider.style.setProperty('--thumb-color', thumbColor);\r\nslider.style.backgroundImage = `linear-gradient(to right, ${leftSliderColor} ${value}%, ${rightSliderColor} ${value}%)`;\r\n\r\nslider.oninput = function() {\r\n fireEvent('value', parseInt(this.value)); \r\n}\r\n\r\nslider.addEventListener('input', function () {\r\n const sliderValue = this.value;\r\n const sliderPercentage = (sliderValue - slider.min) / (slider.max - slider.min) * 100;\r\n slider.style.backgroundImage = `linear-gradient(to right, ${leftSliderColor} ${sliderPercentage}%, ${rightSliderColor} ${sliderPercentage}%)`;\r\n});","html":"
","css":"body {\n\tbackground-color: transparent;\n\twidth: 100%;\n\theight: 100vh;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n margin: 0;\n}\n\n.slider-container {\n display: flex;\n align-items: center;\n width: 100%;\n}\n\n.slider {\n margin-right: 10px;\n -webkit-appearance: none;\n width: 100%;\n height: 6px;\n background: linear-gradient(to right, var(--thumb-color) 50%, #d3d3d3 50%);\n outline: none;\n opacity: 0.7;\n transition: opacity .2s;\n}\n\n.slider:hover {\n opacity: 1;\n}\n\n.slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 35px;\n height: 35px;\n border-radius: 50%;\n border: 3px solid black;\n background: var(--thumb-color);\n cursor: pointer;\n}\n\n.slider::-moz-range-thumb {\n width: 35px;\n height: 35px;\n border-radius: 50%;\n background: var(--thumb-color);\n cursor: pointer;\n}\n","icon":"extension","defaultWidth":500,"defaultHeight":40,"thirdPartyLibraries":[],"persistentId":"9rZx6Fg4fpt7yWQo4","createdAt":1682347041896,"createdBy":"p6hJesCyeKwPPGiby","updatedAt":1683144032090,"updatedBy":"p6hJesCyeKwPPGiby"}}