微件:等级价格滑块差分

               1
               <input type="range" id="lvl" min="1" max="5" step="1" value="1" list="ticks" style="flex:1;">

           <datalist id="ticks"></datalist>

               描述：示例描述（提示：编辑器预览中不生效）

               价格：示例价格

<script>

   (function () {
       // 获取数据
       const data_max = parseInt("", 30);
       const data_price = JSON.parse("")
       const data_desc = JSON.parse("");

       // 定义视图
       const lvl = document.getElementById('lvl');
       const val = document.getElementById('val');
       const price = document.getElementById('price');
       const desc = document.getElementById('desc');
       const renge = document.getElementById('range');
       const ticks = document.getElementById('ticks');

       if (data_max) {
           lvl.max = data_max;
           if (!(data_price.length === data_max && data_desc.length === data_max)) {
               val.textContent = "存在错误";
               return;
           }
       }

       for (let i = 1; i <= data_max; i++) {
           const opt = document.createElement('option');
           opt.value = i;               // 刻度位置
           ticks.appendChild(opt);
       }

       function update() {
           const v = lvl.value;
           val.textContent = v;
           price.textContent = data_price[v - 1];
           desc.textContent = data_desc[v - 1];
       }
       lvl.addEventListener('input', update);
       update(); // 初始
   })();

</script>