# Dynamic Sliders to set values, some Tips

**URL:** https://community.glideapps.com/t/dynamic-sliders-to-set-values-some-tips/79256
**Category:** Ask for Help
**Created:** [January 17, 2025, 7:59am UTC](https://community.glideapps.com/t/dynamic-sliders-to-set-values-some-tips/79256 "2025-01-17T07:59:49Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![\_Romieux](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/_romieux/32/83089_2.png) [@\_Romieux](https://community.glideapps.com/u/_Romieux)
#### Post date: [January 17, 2025, 7:59am UTC](https://community.glideapps.com/t/dynamic-sliders-to-set-values-some-tips/79256/1 "2025-01-17T07:59:49Z")

</div>

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

---

<div class="post-metadata">

### Author: ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)
#### Post date: [January 17, 2025, 12:18pm UTC](https://community.glideapps.com/t/dynamic-sliders-to-set-values-some-tips/79256/2 "2025-01-17T12:18:12Z")

</div>

Maybe it would work with custom ai component 🤔

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [January 18, 2025, 1:38am UTC](https://community.glideapps.com/t/dynamic-sliders-to-set-values-some-tips/79256/3 "2025-01-18T01:38:45Z")

</div>

![CleanShot 2025-01-18 at 08.38.35](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/f/3f596c38aca2460f4d765c0ad64011f3fbb51f2a.png)

Yes, that’s possible.

---

<div class="post-metadata">

### Author: ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)
#### Post date: [January 18, 2025, 1:39am UTC](https://community.glideapps.com/t/dynamic-sliders-to-set-values-some-tips/79256/4 "2025-01-18T01:39:24Z")

</div>

Weelll Thiiinnn give us the answer!!! 😂

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [January 18, 2025, 1:39am UTC](https://community.glideapps.com/t/dynamic-sliders-to-set-values-some-tips/79256/5 "2025-01-18T01:39:57Z")

</div>

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

---

<div class="post-metadata">

### Author: ![\_Romieux](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/_romieux/32/83089_2.png) [@\_Romieux](https://community.glideapps.com/u/_Romieux)
#### Post date: [January 18, 2025, 3:34am UTC](https://community.glideapps.com/t/dynamic-sliders-to-set-values-some-tips/79256/6 "2025-01-18T03:34:38Z")

</div>

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!

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [January 18, 2025, 11:52pm UTC](https://community.glideapps.com/t/dynamic-sliders-to-set-values-some-tips/79256/7 "2025-01-18T23:52:54Z")

</div>

> [@\_Romieux](#):
>
> Wow, thanks, but inside my app is not allowing to slide, always return to zero value.

Do you mean the slider always reset to 0 when you try to slide it? Can you record a video?

---

<div class="post-metadata">

### Author: ![\_Romieux](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/_romieux/32/83089_2.png) [@\_Romieux](https://community.glideapps.com/u/_Romieux)
#### Post date: [January 19, 2025, 5:51am UTC](https://community.glideapps.com/t/dynamic-sliders-to-set-values-some-tips/79256/8 "2025-01-19T05:51:01Z")

</div>

Yes, always reseting to zero when move

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [January 20, 2025, 1:32am UTC](https://community.glideapps.com/t/dynamic-sliders-to-set-values-some-tips/79256/9 "2025-01-20T01:32:22Z")

</div>

I think you should just start prompting it from scratch so it creates something new and not using my code.
