Hi Guys,
Yes Progress Component, multi-choice Checkboxes, Choice component, Sliders but what about dynamics allowing to change on mouseSliding over a progress bar
I searching tips to make Quiz answers tools to my App without using external pay apps or api.
Can you propose me other solutions without add bottom buttons(+)(-)
Have a nice day
Maybe it would work with custom ai component 
Weelll Thiiinnn give us the answer!!! 
<html style="height: auto !important;">
<head>
<script src="//unpkg.com/alpinejs"></script>
<style>
body, input, label {
font-family: Inter, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
}
</style>
<script>
const S = Alpine.reactive({ searches: 0 });
S.init = () => {
window.parent.postMessage(
{ type: "start-component" },
"*"
);
};
Alpine.data("state", () => S);
let updateTimeout = null;
Alpine.effect(() => {
let updates = {};
// Alpine needs to know about all the fields to watch them
if (S.searches !== null)
updates.searches = S.searches;
// Debounce updates to prevent spamming the parent window
if (updateTimeout) {
clearTimeout(updateTimeout);
updateTimeout = undefined;
}
updateTimeout = setTimeout(() => {
const updatesNoProxy = JSON.parse(
JSON.stringify(updates)
);
window.parent.postMessage(
{ type: "set-state", state: updatesNoProxy },
"*"
);
}, 50);
});
function setState(newState) {
for (const key in newState) {
if (S[key] !== newState[key])
S[key] = newState[key];
}
}
window.addEventListener("message", (event) => {
switch (event.data.type) {
case "set-state":
const state = event.data.state;
setState(state);
break;
case "set-theme":
const theme = event.data.theme;
const root = document.querySelector(":root");
root.style.setProperty(
"--accent-color",
theme.colors.accent
);
root.style.setProperty(
"--foreground-color",
theme.colors.foreground
);
root.style.setProperty(
"--background-color",
theme.colors.background
);
break;
default:
break;
}
});
</script>
</head>
<body
x-data="state"
class="flex items-center justify-center bg-[#0a0a0a]"
style="height: auto !important; padding: 0;"
>
<div
class="w-full bg-[#0a0a0a] text-white flex flex-col items-center justify-center p-2"
style="height: auto !important;"
>
<label
for="search-slider"
class="text-lg mb-2 w-full text-left"
>Number of Searches:
<input
type="number"
x-model="searches"
class="bg-transparent border-none text-white w-16 ml-1"
/>
</label>
<input
type="range"
id="search-slider"
min="0"
max="5000"
x-model="searches"
class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-[#2F7983]"
@input="if ($event.target.value === '') searches = 0"
/>
</div>
<script src="//cdn.jsdelivr.net/npm/@iframe-resizer/child"></script>
</body>
</html>
Here’s the code to enter in your AI component. Adjust as needed.
3 Likes
Wow, thanks, but inside my app is not allowing to slide, always return to zero value. (Glide wish : add a formatter for code in AI)
Others Tips are welcome guys!
Do you mean the slider always reset to 0 when you try to slide it? Can you record a video?
Yes, always reseting to zero when move
I think you should just start prompting it from scratch so it creates something new and not using my code.