polirural-attractiveness-clustering/src/adjuster/adjuster.directive.html

<div class="card card-default mainpanel">
    <hs.layout.panel-header panel-name="adjuster" panel-title="'Adjust factors'||translate"></hs.layout.panel-header>
    <style>
        .weather-table>tbody>tr>td,
        .table-condensed>tbody>tr>th,
        .table-condensed>tfoot>tr>td,
        .table-condensed>tfoot>tr>th,
        .table-condensed>thead>tr>td,
        .table-condensed>thead>tr>th {
            padding: 2px;
        }
    </style>
    <div class="card-body">
        <div class="card-body">
                <div ng-repeat="factor in adjusterService.factors">
                    <div class="d-flex flex-row">
                        <div class="p-2 flex-grow-1">
                            <label>{{factor.factor}}</label>
                        </div>
                        <div class="p-2">{{(factor.weight * 100).toFixed(0)}}%</div>
                    </div>                   
                    <input type="range" class="custom-range" ng-change="adjusterService.apply()" ng-model="factor.weight" min="0" max="1.0" step="0.05">
                </div>
        </div>
    </div>
</div>