JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<div class="valueSelection">
    <label>
        <input type="radio" value="1" name="test"/>
    </label>
    <label>
        <input type="radio" value="2" name="test"/>
    </label>
    <label>        
        <input type="radio" value="3" name="test" />
    </label>
    <label>        
        <input type="radio" value="4" name="test"/>
    </label>
</div>

CSS

body{
    margin:30px;
}
.valueSelection input{
    float: left;
    left: -1500px;
    position: absolute;
}
.valueSelection label{ 
    padding:1px 20px;
    background-color: #73123d; 
    -webkit-box-shadow: 0 1px 7px rgba(0,0,0,.25); 
    -moz-box-shadow: 0 1px 7px rgba(0,0,0,.25); 
    box-shadow: 0 1px 7px rgba(0,0,0,.25); 
    background-image: -webkit-linear-gradient(bottom, #eaeef4, #bcc4d9); 
    background-image: -moz-linear-gradient(bottom, #eaeef4, #bcc4d9); 
    background-image: -o-linear-gradient(bottom, #eaeef4, #bcc4d9); 
    background-image: -ms-linear-gradient(bottom, #eaeef4, #bcc4d9); 
    background-image: linear-gradient(to top, #eaeef4, #bcc4d9);
}
.valueSelection label.path{
    border-top:1px solid #999;
    border-bottom:1px solid #999;
    background-color: #73123d; 
    -webkit-box-shadow: 0 1px 7px rgba(0,0,0,.25); 
    -moz-box-shadow: 0 1px 7px rgba(0,0,0,.25); 
    box-shadow: 0 1px 7px rgba(0,0,0,.25); 
    background-image: -webkit-linear-gradient(top, #6ab7ec, #4d8ed8); 
    background-image: -moz-linear-gradient(top, #6ab7ec, #4d8ed8); 
    background-image: -o-linear-gradient(top, #6ab7ec, #4d8ed8);
    background-image: -ms-linear-gradient(top, #6ab7ec, #4d8ed8); 
    background-image: linear-gradient(to bottom, #6ab7ec, #4d8ed8);
}
.valueSelection label.path:first-child{
    border-left:1px solid #999;   
}


.valueSelection label.pathEnd{
    border-right:1px solid #999;
}

JavaScript

$.fn.valueSelection = function() {
    return this.each(function() {
        var $this = $(this);
        var checkedRadio = $this.find('input[type="radio"]');

        function runPath() {
            var checkedRadioChecked = $('input[type="radio"]:checked', $this);
            checkedRadio.each(function() {
                if ($(this).val() <= checkedRadioChecked.val()) {
                    $(this).closest('label').addClass('path');
                    checkedRadioChecked.closest('label').addClass('path pathEnd');
                }
            });
        }
        runPath();
        $this.on('click', checkedRadio, function() {
            $('label', $this).removeClass('path pathEnd')
            runPath()
        });
    });
};
$('.valueSelection').valueSelection();