Animated radio buttons
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Slider Radio

Animated slider radio buttons

Table of Content

🌟 Features

  • Highly customizable.
  • Gracefully falls back on older browsers.

⬇️ Installation


  1. Click download.
  2. Add it to your HTML document.
<script src="slider-radio/slider-radio.js"></script>
<link rel="stylesheet" href="slider-radio/slider-radio.css">

🎉 Usage

  1. Wrap your inputs around a tag with slider-radio class.
  2. Make sure that all the radio buttons all followed by their labels.
  3. Connect all labels witheir respective radio input using for and id.
<div class="slider-radio">
    <input type="radio" name="grade" id="a"><label for="a">A</label>
    <input type="radio" name="grade" id="b"><label for="b">B</label>
    <input type="radio" name="grade" id="c"><label for="c">C</label>


You can add themes by adding their names to the container class in addition to slider-radio. Available themes are:

  1. Base.
  2. Elegant.
  3. Edgy.
  4. Vertical.
See the Example Page at /Example

🤘 Customization

Since it's your project, you may custumize the slider from the slider-radio.css file. Make sure you don't modify the line underneath /* REQUIRED STYLES */.


To avoid confusion, you can simply add styles to your stylesheet. Following, is a guide for css selectors to use:

.slider-radio { 
    /* Container Styles */
.slider-radio label { 
    /* Option Label Styles */
.slider-radio input[type=radio]:checked + label,
.slider-radio .sliding-piece { 
    /* Indicator Styles */

Of course if you are using more than one slider, you can add your own classes and style them respectively by adding yout own classes in addition to the slider-radio class.

⚖️ License