JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sliderWrapper">
</div>

CSS

.niceRadio {
    position: relative;
    width: 20px;
    height: 20px;
    cursor: pointer;
    border-radius: 50%;
    border: 5px solid orange;
}

.niceRadio:hover {
    border-color: lightblue;
}

JavaScript

var _doc = document,
    sliderWrapper = _doc.getElementById('sliderWrapper'),
    radioWrapper = _doc.createElement('div');

for (var i = 0; i < 3; i++) {
    var radio = _doc.createElement('input');
    var niceRadio = _doc.createElement('lable');
    var index = radioWrapper.children.length / 2;

    niceRadio.className = 'niceRadio';
    niceRadio.htmlFor = radio.id = 'sliderRadio' + index;
    radio.type = 'radio';
    radio.name = 'myName';

    radioWrapper.appendChild(radio);
    radioWrapper.appendChild(niceRadio);
    alert(niceRadio.htmlFor);
}

sliderWrapper.appendChild(radioWrapper);