JSFiddle - React, Tailwind, and code Playground

by Lokesh Yadav

HTML

<div class="topicSliderPanel">
              <div id="article_Blogs">
                
                <div id="topicSlider"></div>
              </div>
            </div>
            <div class="topicSliderLinks">
              <ul>
                <li class="whatsnew"><span>|</span><a href="#">How to guides</a></li>
                <li class="pensions"><span>|</span><a href="#">Plant Info</a></li>
                <li class="retirement"><span>|</span><a href="#">Garden Planning</a></li>
                <li class="taxbenefits"><span>|</span><a href="#">Wildlife</a></li>
                <li class="managingmoney"><span>|</span><a href="#">Plant Portrait</a></li>
                <li class="makingmoney"><span>|</span><a href="#">Seasonal Gardening</a></li>
              </ul>
            </div>
          </div>

CSS

ul li { list-style-type:none; }
/* styles for articles and blog on channel home page -*/
#article_Blogs    { padding:0px 90px 0px 0px; width:90%; }
#article_Blogs    h2 { font-family:Arial, Helvetica, sans-serif; font-size:1.6em; font-weight:normal; padding-bottom:5px; text-transform:uppercase;  }
#article_Blogs .ui-slider-horizontal{  height: 10px; margin:15px 0 5px 0; }
#article_Blogs .ui-slider-handle    { background: #000 url(slider_handle.png) no-repeat left top; margin-top:-7px; height:37px; width:105px; border:1px solid #000;     }

.topicSliderLinks ul { width: 983px;  }
.topicSliderLinks ul li{ float:left; font-family:Arial, Helvetica, sans-serif; text-align:center; width:11%; padding:0 0px 25px; }
.topicSliderLinks ul li a{font-size:1.4em; font-weight:normal; text-decoration:none; color:#333; clear:both; }
.topicSliderLinks ul li a:hover{font-size:1.4em; font-weight:normal; text-decoration:none; color:#00aeef; }
.topicSliderLinks ul li a.selected{font-size:1.4em; font-weight:normal; text-decoration:none; color:#00aeef; }

.topicSliderLinks ul li span    { font-size:1.2em; font-weight:bold; color:#c3c3c3; display:block; text-align:center; }


.topicSliderPanel{background:url(../images/sliderTrack.gif) left 43px no-repeat; height:10px; width:983px; }

JavaScript

$.noConflict();

lokesh = {};

/* blogs and topic slider method
----------------------------------------------------*/
lokesh.blogAndTopicSlider = function(minValue, maxValue, defaultPlace){
    jQuery('.topicSliderLinks ul li a:first-child').addClass("selected");
    jQuery( "#topicSlider" ).slider({
                           
        min: minValue,
        max: maxValue,
        value: defaultPlace,
        change: function( event, ui ){
            //if(ui.value == 3){
                alert("you are in at  "+ ui.value);
            //    }
            
            jQuery('.topicSliderLinks ul li a').removeClass("selected");
            if(ui.value == 0){
                jQuery('.whatsnew a').addClass("selected");
            }
            if(ui.value == 1){
                jQuery('.pensions a').addClass("selected");
            }
            if(ui.value == 2){
                jQuery('.retirement a').addClass("selected");
            }
            if(ui.value == 3){
                jQuery('.taxbenefits a').addClass("selected");
            }
            if(ui.value == 4){
                jQuery('.managingmoney a').addClass("selected");
            }
            if(ui.value == 5){
                jQuery('.makingmoney a').addClass("selected");
            }
            
            
            
            
        }
        
    });
}


// document ready start here
jQuery(function() {

    // Slider method defined above
    var sliderLinks= jQuery('.topicSliderLinks ul li').length; 
    lokesh.blogAndTopicSlider(0, sliderLinks-1, 0);
    
    var sliderLiWidth = 100/sliderLinks
    jQuery('.topicSliderLinks ul li').width(sliderLiWidth+"%");
        
});//document ready ends