JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Ractive test</h1>

  <!--
       1. This is the element we'll render our Ractive to.
  -->
  <div id='container'></div>
<script id="template" type='text/ractive'>
  
  <h1>I am a progress fill.</h1>
  <p>Slide or click to adjust my progress.</p>
    {{#if progress<100}}
     
          <div class="progress-bar-fill" style="width: {{progress/2}}%">
<span class="progress-label">{{progress}}%</span>
    </div>
    {{/if}}
    
     {{#if progress>=100}}
    <div class="progress-bar-fill-red" style="width: 50%">
      <span class="progress-label">{{progress}}%</span>
    </div>
    {{/if}}
    <br>
    
     <p>Slide or click to adjust my progress.</p>
    {{#if progress1<100}}
     
          <div class="progress-bar-fill" style="width: {{progress1/2}}%">
<span class="progress-label">{{progress1}}%</span>
    </div>
    {{/if}}A
    
     {{#if progress1>=100}}
    <div class="progress-bar-fill-red" style="width: 50%">
      <span class="progress-label">{{progress1}}%</span>
    </div>
    {{/if}}
     
  <select value='{{selectedProgress}}'>
    <option selected disabled>Select something</option>
    {{#progressbars}}
        <option value='{{id}}'>{{name}}</option>
    {{/progressbars}}
</select>
    
 
      <button on-click='plusTwentyfive'>+25</button>
       <button on-click='plusTen'>+10</button>
       <button on-click='minusTen'>-10</button>
       <button on-click='minusTwentyFive'>-25</button>



</script>

CSS

.progress-bar {
  position: relative;
  width: 200px;
  height: 40px;
  border: 1px solid black;
}
.progress-bar-fill {
  height: inherit;
  background-color: orange;
}
    
.progress-bar-fill-red {
  height: inherit;
  background-color: red;
  
}
.progress-label {
  position: relative;
  top: 3px;
  left: 5px;
  color: #000;
}


input[type=range] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  /* essentially making range slider invisible */
  opacity: 0;
}

JavaScript

var ractive = new Ractive({
  el: document.body,
  template: '#template',
  data: {
    readonly:	false,					
    progress: 	0,
    progress1: 	0,
      
     progressbars: [
            { id: '0', name: 'first' },
            { id: '1', name: 'second' }
         
            // and so on...
        ]
  }
});
      
      
      ractive.on({
  plusTwentyfive: function () {
      var progress = ractive.get('progress');      
      progress=progress+25;
      ractive.set( 'progress', progress);
      
      
      
      var progress1 = ractive.get('progress1');      
      progress1=progress1+25;
      ractive.set( 'progress1', progress1);
  
  },
plusTen: function () {
      var progress = ractive.get('progress');
      progress=progress+10;
      ractive.set( 'progress', progress);
    
    
        var progress1 = ractive.get('progress1');
      progress1=progress1+10;
      ractive.set( 'progress1', progress1);
  
  },
minusTen: function () {
      var progress = ractive.get('progress');
          progress=progress-10;

      if(progress<0)
      {
          progress=0;
      }
      ractive.set( 'progress', progress);
    
    
    
    
    
    
    var progress1 = ractive.get('progress1');
    progress1=progress1-10;
      if(progress1<0)
      {
          progress1=0;
      }
      ractive.set( 'progress1', progress1);
  
  },
          
minusTwentyFive: function () {
      var progress1 = ractive.get('progress1');       
      progress1=progress1-25;
     if(progress1<0)
      {
          progress1=0;
      }
    
      ractive.set( 'progress1', progress1);
  
  },
  deactivate: function () {
    alert( 'Deactivating!' );
  }
});