Sliders as Inputs

Warning: Cannot modify header information – headers already sent by (output started at /home/bionicte/public_html/wp-includes/feed-rss2.php:11) in /home/bionicte/public_html/wp-content/plugins/danger_mouse.php on line 35
Origin Story There once was a worksheet that was meant to be used in a face-to-face scenario. The goal was indicate where you fell on a spectrum across a number cultural orientation of measures. The challenge was to transform that into something digital that could then be part of a larger conversations. Watch the video above to get an idea of what the experience is like or this will make even less sense. The Sliders I like sliders as interface elements for things like these.1 You can see the HTML below that builds them or check out the Codepen for more CSS etc. That’s all pretty straight forward. I did have to add the input tag to the KSES allowed list to keep WordPress from stripping it out. To do that I added the following to our KSES modifier file. Getting the Values Now I needed some javascript to look at these sliders and record the values as the sliders were . . . slid in various directions. This little bit gets our values once we loop through the sliders that exist. Simple. Gravity Forms Integration I did this via Gravity Forms because it’s fast and I’m overly comfortable with it. This is where things get a bit weird. We’re using a typical Gravity Forms to post scenario. Nothing odd […] […]

Read More…

Privacy Statement