Daily Archives: June 12, 2020

JavaScript/CSS/HTML || Simple Animated Slider Radio Button

Radio buttons let a user select only one of a limited number of choices. Radio buttons are normally presented in radio groups (a collection of radio buttons describing a set of related options). Only one radio button in a group can be selected at the same time.

Using JavaScript, the following is sample code which demonstrates how to display a simple animated slider radio button group to the page.

This animated slider radio button comes with a few basic features. When a selection is chosen, a sliding animation appears. The speed of the animation can be modified via CSS transitions. The look and orientation can also be modified via CSS, with the button group direction being either vertical or horizontal.

REQUIRED KNOWLEDGE


JavaScript - Namespace
JavaScript - closest
JavaScript - querySelector
JavaScript - querySelectorAll
JavaScript - stopPropagation
JavaScript - Events
JavaScript - getBoundingClientRect
CSS - transitions
CSS - selectors
Radio Button - What is it?

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.