I’m making a web app in which I’d like certain click events to pop up a dialog with some text, numbers and a slider.

My App.svelte has plenty of things in it, text, images, junk, stuff, and some Svelte components let’s call YellowCards. There may be just a few or maybe fifty of those YellowCards. A YellowCard's HTML section has a bunch of stuff, text, a , stuff, stuff and more stuff, and a small <table> of numbers. It all “works” at least sufficiently for now.

What I want to add is for the user to click on any cell of that table and get a popup with a slider (an HTML input type=”range”) to adjust the number. The maximum value of the slider varies with the column, for example the first column of the table is numbers 0 to 10, the second column is 0 to 255, and so on.

Seems so simple! I am familiar with and have used Svelte since 2019 (though there are holes in my knowledge). But I’ve spent two days on this and am still stuck!

I have found several examples of modal popups, using or not using the html <dialog>, but all are confusing or lacking something vital. I need to cut through the nonsense and obsolete and badly written examples, determine the good ones, and find out for sure just what I need to do.

Some examples have nothing in their App.svelte except a <Modal> containing a custom <Content/> which seems weird. Do I need to pull out all the stuff in my App and put it in a Content for a popup of any kind to work? Is it possible to put code only into the YellowCard.svelte file? Is this just someone’s preferred way of organizing stuff that I can safely ignore? Or must I fiddle with App.svelte?

Apparently not. This example https://dev.to/myleftshoe/svelte-dialogs-the-easy-way-e0f worked fine, nothing named Modal, and I can put the code into YellowCard.svelte and make it work. But this simple example only has a popup with fixed content – no controls.

The example at https://svelte.dev/repl/b95ce66b0ef34064a34afc5c0249f313?version=4.2.15 has a button causing a popup to appear with a text edit, and its value is shown in the main App when OK is clicked. Ah, the Rosetta stone of knowledge! But this is also a complicated example, seemingly with too many parts, and uses a svelte store which I do not see other examples using. Unclear if it’s necessary to use a store!

Some examples have an import { setContext } from "svelte" – but others don’t. Do I need this? I do if I use const { open } = getContext('simple-modal') — but what does this do and do I really need it? And in some examples I see import Modal from 'svelte-simple-modal' — Same questions…

In fumbling around the last two days, working on a ValueAdjuster component to implements this popup, I can sometimes get a dialog to pop up with a slider, have the knob of the slider positioned correctly according to an exported variable I bind to the slider’s value attribute, but that exported variable as seen in YellowCard never updates to the value the user sets. At runtime, if YellowCard's <table>‘s onClick handler updates those min and max values, they don’t change as shown in the slider in the popup (when I’m lucky enough to see the popup).

While I can bind one of ValueAdjuster's variables to the value attribute, I can’t do so for the min or max attributes. (I should check once again, in case I just fumblefingered the spelling of something.)

I have yet to find a good example of a slider in a popup that uses and does not use a store or extraneous objects. Am I comparing obsolete deprecated ways with current best practice ways? Or different unnamed ways to tackle the same design problem? Does my brain need to grow a third hemisphere to understand this stuff and get my project done?

Is it possible to write ValueAdjuster using <dialog> in a way that I can use it in a fairly straightforward way in YellowCard, and pass values usefully between them?