微件:滑块数据差分

       1

       <input type="range" id="lvl_" list="ticks_" style="width:320px">

   <datalist id="ticks_"></datalist>

<script>

   {
       const data = JSON.parse("");

       // 初始化滑块组件
       (function () {
           // 元素
           const lvl = document.getElementById('lvl_');
           const val = document.getElementById('val_');
           const ticks = document.getElementById('ticks_');
           const infoContainer = document.getElementById('info-container_');

           // 属性
           lvl.min = data.min || 1;
           lvl.max = data.max;
           lvl.value = data.default || Math.floor((data.min + data.max) / 2);
           lvl.step = 1;

           // 刻度
           for (let i = data.min; i <= data.max; i++) {
               const opt = document.createElement('option');
               opt.value = i;
               ticks.appendChild(opt);
           }

           infoContainer.innerHTML = ;

           for (const key in data.show) {
               const row = document.createElement('div');
               row.className = 'info-row_';

               const label = document.createElement('span');
               label.className = 'info-label_';
               label.textContent = data.show[key].split('%s')[1];

               const value = document.createElement('span');
               value.className = 'info-value_';
               value.id = key + '_';

               row.appendChild(label);
               row.appendChild(value);
               infoContainer.appendChild(row);
           }

           function update() {
               const v = lvl.value;
               const index = v - data.min;

               if (data.labels && data.labels[index]) {
                   val.textContent = data.labels[index];
               } else {
                   val.textContent = v;
               }

               for (const key in data.show) {
                   const element = document.getElementById(key + '_');
                   if (element && data.levels[index] && data.levels[index][key]) {
                       const format = data.show[key];
                       element.textContent = format.replace('%s', data.levels[index][key]);
                   }
               }
           }

           lvl.addEventListener('input', update);
           update();
       })();
   }

</script>