Dynamic Sliders to set values, some Tips

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 :thinking:

Yes, that’s possible.

Weelll Thiiinnn give us the answer!!! :joy:

<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.