JSFiddle - React, Tailwind, and code Playground

HTML

<form action="#">
        <!-- demo 3 -->
        <fieldset>
            <label for="valueAA">From:</label>
            <select name="valueAA" id="valueAA">
                <optgroup label="2012 May">
                    <option value="05/04">May 04</option>
                    <option value="05/11">May 11</option>
                    <option value="05/18">May 18</option>
                    <option value="05/25" selected="selected">May 25</option>
                </optgroup>
                <optgroup label="Jun">
                    <option value="06/01">Jun 01</option>
                    <option value="06/08">Jun 08</option>
                    <option value="06/15">Jun 15</option>
                    <option value="06/22">Jun 22</option>
                    <option value="06/29">Jun 29</option>
                </optgroup>
                <optgroup label="Jul">
                    <option value="07/06">Jul 06</option>
                    <option value="07/13">Jul 13</option>
                    <option value="07/20">Jul 20</option>
                    <option value="07/27">Jul 27</option>
                </optgroup>
                <optgroup label="Aug">
                    <option value="08/03">Aug 03</option>
                    <option value="08/10">Aug 10</option>
                    <option value="08/17">Aug 17</option>
                    <option value="08/24">Aug 24</option>
                    <option value="08/31">Aug 31</option>
                </optgroup>
                <optgroup label="Sep">
                    <option value="09/07">Sep 07</option>
                    <option value="09/14">Sep 14</option>
                    <option value="09/21">Sep 21</option>
                    <option value="09/28">Sep 28</option>
                </optgroup>
                <optgroup label="Oct">
                    <option value="10/05">Oct 05</option>
                    <option value="10/12">Oct 12</option>
                    <option value="10/19">Oct...

CSS

/*NEW SLIDER STYLES FOR SCALE, ETC*/
/* slider widget */
.ui-slider  {
    text-decoration: none !important;
}
.ui-slider .ui-slider-handle  {
    overflow: visible !important;
}
.ui-slider .ui-slider-tooltip {
    display: none;
}
.ui-slider .screenReaderContext {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    left: -999999999px;
}
.ui-slider .ui-state-active .ui-slider-tooltip, .ui-slider .ui-state-focus .ui-slider-tooltip, .ui-slider .ui-state-hover .ui-slider-tooltip {
    display: block;
    position: absolute;
    bottom: 2.5em;
    text-align: center;
    padding: .3em .2em .4em;
    font-size: .9em;
    width: 8em;
    margin-left: -3.7em;
}
.ui-slider .ui-slider-tooltip .ui-tooltip-pointer-down, .ui-slider .ui-slider-tooltip .ui-tooltip-pointer-down-inner {
    position: absolute; 
    display: block;
    width:0; 
    height:0; 
    border-bottom-width: 0;
    background: none;
}
.ui-slider .ui-slider-tooltip .ui-tooltip-pointer-down {    
    border-left: 7px dashed transparent; 
    border-right: 7px dashed transparent;
    border-top-width: 8px;
    bottom:    -8px;
    right: auto;
    left: 50%;
    margin-left: -7px;
}
.ui-slider .ui-slider-tooltip .ui-tooltip-pointer-down-inner {
    border-left: 6px dashed transparent; 
    border-right: 6px dashed transparent;
    border-top: 7px solid #fff;
    bottom:    auto;
    top: -9px;
    left: -6px;
}
.ui-slider a {
    text-decoration: none;
}
.ui-slider ol, .ui-slider li, .ui-slider dl, .ui-slider dd, .ui-slider dt {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ui-slider ol, .ui-slider dl {
    position: relative;
    top: 1.3em;
    width: 100%;
}
.ui-slider dt {
    top: 1.5em;
    position: absolute;
    padding-top: .2em;
    text-align: center;
    border-bottom: 1px dotted #ddd;
    border-right: 1px dotted #aaa;
    height: .7em;
    color: #999;
}
.ui-slider dt span {
    background: #fff;
    padding: 0 .5em;
}
.ui-slider li, .ui-slider dd {
   ...

JavaScript

/*
 * --------------------------------------------------------------------
 * jQuery-Plugin - selectToUISlider - creates a UI slider component from a select element(s)
 * by Scott Jehl, [email protected]
 * http://www.filamentgroup.com
 * reference article: http://www.filamentgroup.com/lab/update_jquery_ui_16_slider_from_a_select_element/
 * demo page: http://www.filamentgroup.com/examples/slider_v2/index.html
 * 
 * Copyright (c) 2008 Filament Group, Inc
 * Dual licensed under the MIT (filamentgroup.com/examples/mit-license.txt) and GPL (filamentgroup.com/examples/gpl-license.txt) licenses.
 *
 * Usage Notes: please refer to our article above for documentation
 *  
 * --------------------------------------------------------------------
 */


jQuery.fn.selectToUISlider = function(settings){
    var selects = jQuery(this);
    
    //accessible slider options
    var options = jQuery.extend({
        labels: 3, //number of visible labels
        tooltip: true, //show tooltips, boolean
        tooltipSrc: 'text',//accepts 'value' as well
        labelSrc: 'value',//accepts 'value' as well    ,
        sliderOptions: null
    }, settings);


    //handle ID attrs - selects each need IDs for handles to find them
    var handleIds = (function(){
        var tempArr = [];
        selects.each(function(){
            tempArr.push('handle_'+jQuery(this).attr('id'));
        });
        return tempArr;
    })();
    
    //array of all option elements in select element (ignores optgroups)
    var selectOptions = (function(){
        var opts = [];
        selects.eq(0).find('option').each(function(){
            opts.push({
                value: jQuery(this).attr('value'),
                text: jQuery(this).text()
            });
        });
        return opts;
    })();
    
    //array of opt groups if present
    var groups = (function(){
        if(selects.eq(0).find('optgroup').size()>0){
            var groupedData = [];
           ...