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>
    
    {{#each progressbars}}
        <p>Slide or click to adjust my progress.</p>
        {{#if value < 100}}
            <div class="progress-bar-fill" style="width: {{value/2}}%">
                <span class="progress-label">{{value}}%</span>
            </div>
        {{/if}}

        {{#if value>=100}}
            <div class="progress-bar-fill-red" style="width: 50%">
                <span class="progress-label">{{value}}%</span>
            </div>
        {{/if}}
    {{/each}}

    <select value='{{selectedProgress}}'>
        <option selected disabled>Select something</option>
        {{#each progressbars :index}}
            <option value='{{index}}'>{{name}}</option>
        {{/each}}
    </select>

    {{#each amounts}}
        <button disabled='{{selectedProgress == null}}' on-click='adjust(this)'>{{this > 0 ? '+' : ''}}{{this}}</button>
    {{/each}}
</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: {
        progressbars: [
            { name: 'first', value: 0 },
            { name: 'second', value: 0 }

            // and so on...
        ],
        amounts: [ +25, +10, -10, -25 ]
    },
    adjust: function ( d ) {
        var selected = this.get( 'selectedProgress' );
        if ( selected == null ) return;
        
        var keypath = 'progressbars[' + selected + '].value';
        this.add( keypath, d );
    }
});