Sliders

Sliders like the ones in the box below are a useful interface for letting informants weight items, which can be useful for prioratizing competing goals or identifying how storngly positive or negative people feel about something. The example below compares two contradictory ideas. If users said the product was 100 % usable and that it was 75% in need of a manual, you would conclude that the users didn't find the product as usable as they said it was.

While knowing about slider interfaces is useful for UXers, I am sharing this example primarily because ChatGPt wrote the HTML/CSS and JavaScript, and I want to encourage you to learn how to use AI to help you build UX interfaces. You can, of course, buy software and pay subscription fees to create interfaces instead of building them yourself. As with all things in life, you can spend money or you can spend time.

At my request, ChatGPT created 4 files: slider.php, save.php, results.php, and average.php. I edited them slightly.

The ChatGPT dialogue went like this:

Using css and html please create a slider that a user can drag between 1 and 100, incremented by 5 where the final number is display in a text box to the right --> provided HTML/CSS file and explanation

what would that look like with two different sliders? --> revised the previous file to include a second slider

Please add to that storing the results in a file on ther server -- > created save.php

Please write a php script that can provide an average for Slider 1 and Slider2 using data like the following: Slider 1: 56 Slider 2: 26 Slider 1: 96 Slider 2: 1 Slider 1: 100 Slider 2: 100 --> created average.php

I renamed each of the files it gave me by appending slider_ to the beginning of each name, to make them easier for me to see in the list of many files in that directory.