JSFiddle - React, Tailwind, and code Playground

by ecropolis

HTML

<div class="fit-widget">
  <div class="fit-head">
    <div class="fit-label">
      Fit
    </div>
    <div class="fit-statnote">
      60% Say it fits slightly larger.
    </div>
    <div class="fit-control">
    <a href="#disto" class="fit-expand"><svg viewBox="10 10 20 20" height="45%" width="45%"><path fill="#f96302" d="M14.83,16.42L24,25.59l9.17-9.17L36,19.25l-12,12l-12-12L14.83,16.42z" height="50%" width="50%"></path></svg></a>
    </div>
  </div>
  <div class="fit-scale">
    <ul>
      <li class="brand fit-node fit-small">
        <span class="fit-shim">
          <span class="fit-metric">10%</span>
        </span>
        <span class="fit-bar"></span>
      </li>
      <li class="brand fit-node fit-smaller">
        <span class="fit-shim">
          <span class="fit-metric">0%</span>
        </span>
        <span class="fit-bar"></span>
      </li>
      <li class="brand fit-node fit-justright">
        <span class="fit-shim">
          <span class="fit-metric">30%</span>
        </span>
        <span class="fit-bar"></span>
      </li>
      <li class="brand fit-node fit-large fit-active">
        <span class="fit-shim">
          <span class="fit-metric">60%</span>
        </span>
        <span class="fit-bar"></span>
      </li>
      <li class="brand fit-node fit-larger">
        <span class="fit-shim">
          <span class="fit-metric">20%</span>
        </span>
        <span class="fit-bar"></span>
      </li>
    </ul>
  </div>
  <div class="fit-size-labels">
    <span style="text-align: left;">Smaller</span>
    <span style="text-align: center;">Just Right</span>
    <span style="text-align: right;">Larger</span>
  </div>
</div>

CSS

body {
    font-size: 1rem;
    font-family: "helvetica-neue-light", Helvetica Neue, Helvetica, Arial, sans-serif !important;
    color: #333;
    padding: 0;
}
.fit-widget {
  list-style: none;
  font-size: .75em;
  width: 230px;
  margin: 20px auto;
  position: relative;
}
.fit-widget .fit-scale {
  padding-right: 30px;
  margin: 0;
}
.fit-widget .fit-scale ul {
  list-style: none;
  font-size: 0;
  padding: 0;
  margin: 0;
}
.fit-widget .fit-scale.fit-expanded {
    height: 90px;
    overflow: hidden;
}
.fit-widget .fit-scale.fit-expanded .fit-metric {
  font-size: 10px;
  text-align: center;
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
}
.fit-widget .fit-scale.fit-expanded ul,
.fit-widget .fit-scale.fit-expanded ul li{
  height: 100%;
}

.fit-widget .fit-scale.fit-expanded .fit-shim {
  display: block;
  position: relative;
  transition:height 0.4s ease-in;
  height: 95%;
}
.fit-widget .fit-scale.fit-expanded .fit-bar {
  height: 5%;
}
.fit-widget .fit-head {
  display: flex;
  margin-bottom: 5px;
  padding: 0 2px;
}
.fit-widget .fit-head .fit-label {
  width: auto;
  border-right: 1px solid #CCC;
  font-weight: 600;
  padding-right: 8px;
}
.fit-widget .fit-head .fit-statnote {
  width: 70%;
  padding-left: 8px;
}
.fit-widget .fit-head div {
    line-height: 1em;
}
.fit-widget .fit-head .fit-control {
   flex: 1;
   text-align: center;
}
.fit-widget .fit-node {
  display: inline-block;
  list-style-type: none;
  height: 9px;
  width: 18%;
  padding: 2px;
  margin: 0;
  text-align: center;
}
.fit-widget .fit-bar {
  background: #CCC;
  height: 100%;
  width: auto;
  display:block;
  min-height: 5%;
  transition:height 0.4s ease-in;
}
.fit-widget .fit-active .fit-bar {
    background: #F96302;
}
.fit-widget button {
  border: none;
  outline:none;
  
}
.fit-widget .fit-size-labels {
  display: flex;
  padding: 0 30px 0 0;
  margin: 6px 0;
}

.fit-widget .fit-size-labels span {
  display: block;
  flex: 1;
  font-size: .6em;
}
.fit-widget...

JavaScript

$(function() {
	$('.fit-expand').on('click',function(){
    $('.fit-scale').addClass('fit-expanded');
    setTimeout(function(){
      $('.fit-node').each(function(){
        var val = $(this).find('.fit-metric').text().slice(0, -1);
        val = (val == 0 ? 5 : val);
        console.log('val',val);
        $(this).find('.fit-bar').css('height',val+'%');
        $(this).find('.fit-shim').css('height',100 - val + '%');
      });
    },300);
	});
 });

var size_map = ['small','medium','large','extra large', 'extra large tall', '2x large', '2x large tall', '3x large tall', '4x large', '4x large tall'];

var size_prod = [
	{name:'size',value:'4x large tall'},
	{name:'size', value: 'medium'}
];

function filter_order(ref, data){
  var arr = [];
  for (var i = 0; i < ref.length; i++){
    for (var ii = 0; ii < data.length; ii++){
      console.log(data[ii].value + ' === '+ data[ii], data[ii].value === ref[i]);
      if(data[ii].value === ref[i])
        arr.push(data[ii]);
    }
  }
  return arr;
}


console.log('sizes',filter_order(size_map, size_prod));