I’ve got an Input Slider element where my users can select a range of screen sizes they want. I want the lowest possible value to be 10 and the highest to be 80 and I want that to be the default.
Let’s say the user wants screens from 20" to 34". They then click “Apply” and I have two URL parameters that pass the data to my external database (monitorSizeMin=20&monitorSizeMax=34). Great!
Here’s the problem: Let’s say the user bookmarks this URL or shares it with a friend with all the parameters worked out. Even though in the URL the parameters are set to show screens from 20" to 34", the Input Slider shows the default 10-80. This could cause the user to falsely believe that they are seeing screens within that range.
One “solution” is to set the Input Slider’s Min and Max values to pull from a the corresponding URL parameter’s, but the issue with that is those values are literally the Min and Max, so the user would not be able to slide back to 14" since 20" would be their new minimum.
What I would like to have happen is to create a third URL parameter that passes a “numeric range” which my Input Slider appears to be able to accept:
The problem is inside my workflow when I go to pass the URL parameters, I cannot find a way to combine the two numbers into a format that is “printable” for a URL.
Is there a way to combine these two values and pass them as a numeric range via a URL?